[feat] Add HuggingFace model import support #7540
Conversation
luke-mino-altherr
requested review from
a team,
KarryCharon,
Yorha4D and
shinshin86
as code owners
dosubot
bot
added
the
size:L
|
Important Review skippedAuto reviews are limited based on label configuration. 🚫 Review skipped — only excluded labels are configured. (1)
Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the 📝 WalkthroughWalkthroughAdds Hugging Face as an optional model import source behind a server feature flag; introduces import-source types/implementations; updates upload dialog, inputs, and wizard to detect source, fetch/decode metadata, prefill fields, pre-upload previews, and expose detectedSource; adds i18n keys and remoteConfig flag. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Dialog as UploadModelDialog
participant Wizard as useUploadModelWizard
participant Source as ImportSource Validator
participant Server as Backend API
User->>Dialog: Enter model URL (step 1)
Dialog->>Wizard: set url
Wizard->>Wizard: read huggingfaceModelImportEnabled flag
Wizard->>Wizard: build importSources (civitai ± huggingface)
Wizard->>Source: validateSourceUrl(url) for each source
Source-->>Wizard: match/no-match
Wizard->>Dialog: set detectedSource
alt source detected
Dialog->>Wizard: fetchMetadata()
Wizard->>Server: GET metadata (source-specific)
Server-->>Wizard: metadata (filename,name,tags,preview URL)
Wizard->>Wizard: decode fields, prefill name/tags/preview, advance step
Wizard->>Server: upload preview image (if present)
Server-->>Wizard: preview upload result (continue on failure)
Dialog->>Wizard: confirm upload
Wizard->>Server: POST model (user_metadata.source = detectedSource.type)
Server-->>Wizard: upload complete
else no source detected
Wizard->>Dialog: set uploadError (supported sources list)
Dialog->>User: show error
end
Possibly related PRs
✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (1)
public/assets/images/hf-logo.svgis excluded by!**/*.svg
📒 Files selected for processing (14)
src/components/graph/GraphCanvas.vue(1 hunks)src/composables/useFeatureFlags.ts(2 hunks)src/locales/en/main.json(4 hunks)src/platform/assets/components/UploadModelDialog.vue(3 hunks)src/platform/assets/components/UploadModelDialogHeader.vue(1 hunks)src/platform/assets/components/UploadModelFooter.vue(2 hunks)src/platform/assets/components/UploadModelUrlInput.vue(1 hunks)src/platform/assets/components/UploadModelUrlInputCivitai.vue(1 hunks)src/platform/assets/composables/useModelTypes.ts(1 hunks)src/platform/assets/composables/useUploadModelWizard.ts(6 hunks)src/platform/assets/importSources/civitaiImportSource.ts(1 hunks)src/platform/assets/importSources/huggingfaceImportSource.ts(1 hunks)src/platform/assets/types/importSource.ts(1 hunks)src/platform/remoteConfig/types.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (15)
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/platform/remoteConfig/types.tssrc/platform/assets/types/importSource.tssrc/platform/assets/composables/useModelTypes.tssrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/components/graph/GraphCanvas.vuesrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/components/UploadModelUrlInput.vuesrc/composables/useFeatureFlags.tssrc/platform/assets/composables/useUploadModelWizard.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safetyMinimize the surface area (exported values) of each module and composable
Files:
src/platform/remoteConfig/types.tssrc/platform/assets/types/importSource.tssrc/platform/assets/composables/useModelTypes.tssrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/composables/useFeatureFlags.tssrc/platform/assets/composables/useUploadModelWizard.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/platform/remoteConfig/types.tssrc/platform/assets/types/importSource.tssrc/platform/assets/composables/useModelTypes.tssrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/components/graph/GraphCanvas.vuesrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/components/UploadModelUrlInput.vuesrc/composables/useFeatureFlags.tssrc/platform/assets/composables/useUploadModelWizard.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/platform/remoteConfig/types.tssrc/platform/assets/types/importSource.tssrc/platform/assets/composables/useModelTypes.tssrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/components/graph/GraphCanvas.vuesrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/components/UploadModelUrlInput.vuesrc/composables/useFeatureFlags.tssrc/platform/assets/composables/useUploadModelWizard.ts
**/*.{ts,tsx,js,jsx,vue,json}
📄 CodeRabbit inference engine (AGENTS.md)
Code style: Use 2-space indentation, single quotes, no trailing semicolons, and 80-character line width (see
.prettierrc)
Files:
src/platform/remoteConfig/types.tssrc/platform/assets/types/importSource.tssrc/platform/assets/composables/useModelTypes.tssrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/components/graph/GraphCanvas.vuesrc/locales/en/main.jsonsrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/components/UploadModelUrlInput.vuesrc/composables/useFeatureFlags.tssrc/platform/assets/composables/useUploadModelWizard.ts
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Imports must be sorted and grouped by plugin; runpnpm formatbefore committing
Use TypeScript for type safety; never useanytype - use proper TypeScript types
Never useas anytype assertions; fix the underlying type issue instead
Use es-toolkit for utility functions
Write code that is expressive and self-documenting; avoid comments unless absolutely necessary; do not add or retain redundant comments
Keep functions short and functional
Minimize nesting in code (e.g., deeply nestediforforstatements); apply the Arrow Anti-Pattern principle
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions, especially testable ones
Files:
src/platform/remoteConfig/types.tssrc/platform/assets/types/importSource.tssrc/platform/assets/composables/useModelTypes.tssrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/components/graph/GraphCanvas.vuesrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/components/UploadModelUrlInput.vuesrc/composables/useFeatureFlags.tssrc/platform/assets/composables/useUploadModelWizard.ts
src/**/{services,composables}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/{services,composables}/**/*.{ts,tsx}: Useapi.apiURL()for backend endpoints instead of constructing URLs directly
Useapi.fileURL()for static file access instead of constructing URLs directly
Files:
src/platform/assets/composables/useModelTypes.tssrc/composables/useFeatureFlags.tssrc/platform/assets/composables/useUploadModelWizard.ts
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/platform/assets/composables/useModelTypes.tssrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelUrlInput.vuesrc/composables/useFeatureFlags.tssrc/platform/assets/composables/useUploadModelWizard.ts
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/platform/assets/composables/useModelTypes.tssrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelUrlInput.vuesrc/composables/useFeatureFlags.tssrc/platform/assets/composables/useUploadModelWizard.ts
src/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
Files:
src/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelUrlInput.vue
**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
**/*.vue: Use Vue 3 SFCs (Single File Components) with Composition API only; do not use Options API
Vue components must use<script setup lang="ts">for component logic
Use Vue 3.5 TypeScript style for default prop declaration with reactive props destructuring; do not usewithDefaultsor runtime props declaration
PreferuseModelto separately defining a prop and emit
Use Tailwind 4 utility classes for styling; avoid using<style>blocks in Vue components
Use semantic Tailwind values fromstyle.csstheme instead of thedark:variant; for example, usebg-node-component-surfaceinstead ofdark:prefixes
Always usecn()utility from@/utils/tailwindUtilto merge Tailwind class names; do not use:class="[]"syntax
Usereffor reactive state in Vue Composition API components
Implement computed properties withcomputed()from Vue; avoid using arefwith awatchif acomputedwould work instead
UsewatchandwatchEffectfor side effects in Vue components
Implement lifecycle hooks usingonMounted,onUpdated, and other Vue lifecycle functions
Useprovide/injectfor dependency injection; do not use dependency injection if a Store or shared composable would be simpler
Do not import Vue macros unnecessarily; only use when needed
Be judicious with addition of new refs or other state: prefer props, avoid redundantcomputed, and prefercomputedoverwatch
Use VueUse functions for performance-enhancing styles
In Vue Components, implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Implement proper error handling in Vue components
Follow Vue 3 style guide and naming conventions
Use vue-i18n in composition API for any string literals; place new translation entries insrc/locales/en/main.json
Avoid new usage of PrimeVue components; prefer shadcn/vue or Reka UI instead
Files:
src/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelUrlInput.vue
src/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsVue component file names must use PascalCase; for example,
MenuHamburger.vue
Files:
src/components/graph/GraphCanvas.vue
src/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system package
Files:
src/components/graph/GraphCanvas.vue
src/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI strings
Files:
src/components/graph/GraphCanvas.vue
src/composables/**/*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Composable files must follow the naming pattern
useXyz.ts
Files:
src/composables/useFeatureFlags.ts
🧠 Learnings (34)
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
src/platform/remoteConfig/types.tssrc/platform/assets/types/importSource.tssrc/platform/assets/composables/useModelTypes.tssrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/composables/useFeatureFlags.tssrc/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-12-13T11:03:11.264Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7416
File: src/stores/imagePreviewStore.ts:5-7
Timestamp: 2025-12-13T11:03:11.264Z
Learning: In the ComfyUI_frontend repository, lint rules require keeping 'import type' statements separate from non-type imports, even if importing from the same module. Do not suggest consolidating them into a single import statement. Ensure type imports remain on their own line (import type { ... } from 'module') and regular imports stay on separate lines.
Applied to files:
src/platform/remoteConfig/types.tssrc/platform/assets/types/importSource.tssrc/platform/assets/composables/useModelTypes.tssrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/composables/useFeatureFlags.tssrc/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.
Applied to files:
src/platform/remoteConfig/types.tssrc/platform/assets/types/importSource.tssrc/platform/assets/composables/useModelTypes.tssrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/components/graph/GraphCanvas.vuesrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/components/UploadModelUrlInput.vuesrc/composables/useFeatureFlags.tssrc/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Implement proper TypeScript types throughout the codebase
Applied to files:
src/platform/assets/types/importSource.tssrc/platform/assets/composables/useModelTypes.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.{ts,tsx,vue} : Imports must be sorted and grouped by plugin; run `pnpm format` before committing
Applied to files:
src/platform/assets/composables/useModelTypes.tssrc/components/graph/GraphCanvas.vue
📚 Learning: 2025-12-09T03:49:52.828Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.
Applied to files:
src/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelUrlInput.vue
📚 Learning: 2025-12-09T21:40:12.361Z
Learnt from: benceruleanlu
Repo: Comfy-Org/ComfyUI_frontend PR: 7297
File: src/components/actionbar/ComfyActionbar.vue:33-43
Timestamp: 2025-12-09T21:40:12.361Z
Learning: In Vue single-file components, allow inline Tailwind CSS class strings for static classes and avoid extracting them into computed properties solely for readability. Prefer keeping static class names inline for simplicity and performance. For dynamic or conditional classes, use Vue bindings (e.g., :class) to compose classes.
Applies to all Vue files in the repository (e.g., src/**/*.vue) where Tailwind utilities are used for static styling.
Applied to files:
src/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelUrlInput.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Prefer emit/event-name for state changes over other communication patterns
Applied to files:
src/platform/assets/components/UploadModelFooter.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitch
Applied to files:
src/platform/assets/components/UploadModelFooter.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Implement lifecycle hooks using `onMounted`, `onUpdated`, and other Vue lifecycle functions
Applied to files:
src/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Prefer `useModel` to separately defining a prop and emit
Applied to files:
src/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Applied to files:
src/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Implement lifecycle hooks with onMounted, onUpdated, etc.
Applied to files:
src/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover
Applied to files:
src/platform/assets/components/UploadModelFooter.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Calendar component with DatePicker
Applied to files:
src/platform/assets/components/UploadModelFooter.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Dropdown component with Select
Applied to files:
src/platform/assets/components/UploadModelFooter.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Vue components must use `<script setup lang="ts">` for component logic
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use setup() function in Vue 3 Composition API
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing styles
Applied to files:
src/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Use setup() function for component logic
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize Vue 3's Teleport component when needed
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/{components,composables}/**/*.{ts,tsx,vue} : Use vue-i18n for ALL user-facing strings by adding them to `src/locales/en/main.json`
Applied to files:
src/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/locales/en/main.jsonsrc/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Applied to files:
src/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Define proper props and emits definitions in Vue components
Applied to files:
src/platform/assets/components/UploadModelUrlInputCivitai.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Do not import Vue macros unnecessarily; only use when needed
Applied to files:
src/components/graph/GraphCanvas.vue
📚 Learning: 2025-12-09T04:35:43.971Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/locales/en/main.json:774-780
Timestamp: 2025-12-09T04:35:43.971Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, locale files other than `src/locales/en/main.json` are generated automatically on every release. Developers only need to add English (en) key/values in `src/locales/en/main.json` when making PRs; manual updates to other locale files (fr, ja, ko, ru, zh, zh-TW, es, ar, tr, etc.) are not required and should not be suggested in reviews.
Applied to files:
src/locales/en/main.json
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use vue-i18n for ALL UI strings
Applied to files:
src/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use vue-i18n in composition API for any string literals; place new translation entries in `src/locales/en/main.json`
Applied to files:
src/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition API
Applied to files:
src/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive state
Applied to files:
src/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use `ref` for reactive state in Vue Composition API components
Applied to files:
src/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Implement computed() for derived state in Vue 3 Composition API
Applied to files:
src/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Implement computed properties with `computed()` from Vue; avoid using a `ref` with a `watch` if a `computed` would work instead
Applied to files:
src/platform/assets/composables/useUploadModelWizard.ts
🧬 Code graph analysis (4)
src/platform/assets/importSources/huggingfaceImportSource.ts (1)
src/platform/assets/types/importSource.ts (2)
ImportSourceHandler(11-41)ImportSourceType(4-4)
src/platform/assets/importSources/civitaiImportSource.ts (1)
src/platform/assets/types/importSource.ts (2)
ImportSourceHandler(11-41)ImportSourceType(4-4)
src/composables/useFeatureFlags.ts (2)
src/platform/remoteConfig/remoteConfig.ts (1)
remoteConfig(22-22)src/scripts/api.ts (1)
api(1306-1306)
src/platform/assets/composables/useUploadModelWizard.ts (5)
src/composables/useFeatureFlags.ts (1)
useFeatureFlags(23-90)src/platform/assets/types/importSource.ts (1)
ImportSourceHandler(11-41)src/platform/assets/importSources/civitaiImportSource.ts (1)
civitaiImportSource(35-35)src/platform/assets/importSources/huggingfaceImportSource.ts (1)
huggingfaceImportSource(37-37)src/platform/assets/services/assetService.ts (1)
assetService(463-463)
🔇 Additional comments (20)
src/platform/assets/composables/useModelTypes.ts (1)
53-58: LGTM! Alphabetical sorting improves UX.The alphabetical sorting by display name makes the model type list more user-friendly. Using
localeCompareensures proper locale-aware string comparison.src/components/graph/GraphCanvas.vue (1)
465-467: Formatting-only change.This is a formatting adjustment with no functional impact. The CI formatter will handle these automatically.
src/platform/remoteConfig/types.ts (1)
43-43: LGTM! Feature flag addition follows existing patterns.The new
huggingface_model_import_enabledfield is properly typed as an optional boolean and follows the established pattern for remote config feature flags.src/platform/assets/components/UploadModelDialogHeader.vue (1)
1-29: LGTM! Feature flag integration is well-implemented.The conditional rendering based on
huggingfaceModelImportEnabledflag is correctly implemented:
- Civitai logo shown only when the flag is disabled
- Title dynamically switches between generic and Civitai-specific text
- Follows Vue 3 Composition API patterns properly
src/platform/assets/components/UploadModelDialog.vue (1)
6-16: LGTM! Feature flag gating is properly implemented.The conditional rendering correctly switches between the generic
UploadModelUrlInputandUploadModelUrlInputCivitaicomponents based on the feature flag, with both properly bound towizardData.url.src/platform/assets/importSources/huggingfaceImportSource.ts (1)
1-37: LGTM! Implementation correctly follows the ImportSourceHandler interface.The
HuggingFaceImportSourceclass is well-structured:
- Properly implements the
ImportSourceHandlerinterface- URL validation correctly checks for
huggingface.codomain including subdomains- Uses try-catch for safe URL parsing
- Exports a singleton instance following the established pattern
src/platform/assets/components/UploadModelFooter.vue (1)
43-43: > Likely an incorrect or invalid review comment.src/composables/useFeatureFlags.ts (2)
16-17: LGTM! Enum addition follows convention.The new HUGGINGFACE_MODEL_IMPORT_ENABLED flag is properly added to the ServerFeatureFlag enum with the correct naming convention.
71-80: LGTM! Feature flag implementation is consistent.The huggingfaceModelImportEnabled getter correctly follows the established pattern: remoteConfig check first, then fallback to WebSocket feature flag with a sensible default of false.
src/platform/assets/importSources/civitaiImportSource.ts (2)
9-33: LGTM! Clean implementation of the ImportSourceHandler interface.The CivitaiImportSource class properly implements URL validation with graceful error handling and provides appropriate i18n keys for localization.
13-20: LGTM! Robust URL validation with subdomain support.The validateUrl method correctly handles malformed URLs with try-catch and validates both the main domain and subdomains using endsWith('.civitai.com').
src/platform/assets/components/UploadModelUrlInput.vue (2)
18-44: LGTM! External links are properly secured.The Civitai and Hugging Face links correctly use target="_blank" with rel="noopener noreferrer" for security.
8-8: Add DOMPurify sanitization for v-html on line 65.Line 65 renders i18n content directly with v-html without sanitization. Import DOMPurify and wrap the translation:
v-html="DOMPurify.sanitize($t('assetBrowser.maxFileSize'))"to prevent XSS attacks. This pattern is already established in ReleaseNotificationToast.vue and WhatsNewPopup.vue.⛔ Skipped due to learnings
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:34.324Z Learning: Applies to src/**/*.{ts,tsx,vue} : Sanitize HTML with DOMPurify to prevent XSS attacksLearnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.{vue,ts,js} : Use vue-i18n for ALL UI stringssrc/platform/assets/components/UploadModelUrlInputCivitai.vue (2)
8-9: Verify XSS safety for v-html usage.Multiple uses of v-html with i18n content should be sanitized with DOMPurify to prevent XSS attacks, consistent with the project's security guidelines. Even though these are static i18n keys, sanitization ensures defense-in-depth.
Also applies to: 14-14, 25-25
34-46: LGTM! Props and emits are properly typed.The component correctly uses TypeScript for props and emits definitions, and implements a proper computed property for two-way binding with v-model.
src/platform/assets/types/importSource.ts (1)
1-41: LGTM! Well-designed type definitions.The ImportSourceType and ImportSourceHandler interface provide a clean, extensible abstraction for handling multiple import sources. Good documentation and proper TypeScript usage throughout.
src/platform/assets/composables/useUploadModelWizard.ts (4)
89-97: LGTM! Proper source validation with localized error message.The URL validation correctly uses the detectedSource and provides a helpful error message with template parameters for i18n.
103-117: LGTM! Robust URL decoding with graceful fallback.The filename and name decoding properly handles malformed URL-encoded strings by catching errors and preserving the original value.
173-196: LGTM! Robust preview image upload with proper error handling.The preview upload correctly extracts the file extension from the data URL MIME type and continues with the main upload even if the preview fails.
198-209: LGTM! Proper null safety with fallback value.The source metadata correctly uses optional chaining and nullish coalescing to provide 'unknown' as a fallback when no source is detected.
| getLabelKey(): string { | ||
| return 'assetBrowser.huggingfaceLinkLabel' | ||
| } | ||
|
|
||
| getPlaceholderKey(): string { | ||
| return 'assetBrowser.huggingfaceLinkPlaceholder' | ||
| } | ||
|
|
||
| getExampleKey(): string { | ||
| return 'assetBrowser.huggingfaceLinkExample' | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Check if the locale file exists and look for the referenced keys
cat src/locales/en/main.json | grep -i "huggingface\|genericLink"Repository: Comfy-Org/ComfyUI_frontend
Length of output: 539
🏁 Script executed:
# Also check the structure to understand the exact format
head -50 src/locales/en/main.jsonRepository: Comfy-Org/ComfyUI_frontend
Length of output: 2151
🏁 Script executed:
# Read the specific file to verify the implementation
cat src/platform/assets/importSources/huggingfaceImportSource.tsRepository: Comfy-Org/ComfyUI_frontend
Length of output: 944
🏁 Script executed:
# Search for assetBrowser namespace in the locale file
grep -n "assetBrowser" src/locales/en/main.json | head -20Repository: Comfy-Org/ComfyUI_frontend
Length of output: 94
🏁 Script executed:
# Get context around assetBrowser section to see the full structure
grep -A 30 '"assetBrowser"' src/locales/en/main.jsonRepository: Comfy-Org/ComfyUI_frontend
Length of output: 2232
🏁 Script executed:
# Check if there are other import sources for comparison
find src/platform/assets/importSources -name "*.ts" -type fRepository: Comfy-Org/ComfyUI_frontend
Length of output: 187
🏁 Script executed:
cat src/platform/assets/importSources/civitaiImportSource.tsRepository: Comfy-Org/ComfyUI_frontend
Length of output: 882
Add missing Hugging Face i18n keys to src/locales/en/main.json.
The implementation references three i18n keys that don't exist in the locale file:
assetBrowser.huggingfaceLinkLabelassetBrowser.huggingfaceLinkPlaceholderassetBrowser.huggingfaceLinkExample
This will cause missing translation errors at runtime. The pattern in the codebase shows each import source has branded keys (Civitai has civitaiLinkLabel, civitaiLinkPlaceholder, civitaiLinkExample). Add the corresponding Hugging Face keys to the assetBrowser namespace in src/locales/en/main.json:
"huggingfaceLinkLabel": "Hugging Face model <span class=\"font-bold italic\">download</span> link",
"huggingfaceLinkPlaceholder": "Paste Hugging Face link here",
"huggingfaceLinkExample": "<strong>Example:</strong> <a href=\"https://huggingface.co/example\" target=\"_blank\" class=\"text-muted-foreground\">https://huggingface.co/example</a>"🤖 Prompt for AI Agents
In src/locales/en/main.json around the assetBrowser section (add after existing
import-source keys), add the three missing Hugging Face keys referenced in
src/platform/assets/importSources/huggingfaceImportSource.ts (lines 24–34):
assetBrowser.huggingfaceLinkLabel, assetBrowser.huggingfaceLinkPlaceholder, and
assetBrowser.huggingfaceLinkExample; set their values to the provided strings
for label ("Hugging Face model <span class=\"font-bold italic\">download</span>
link"), placeholder ("Paste Hugging Face link here"), and example
("<strong>Example:</strong> <a href=\"https://huggingface.co/example\"
target=\"_blank\"
class=\"text-muted-foreground\">https://huggingface.co/example</a>") so the keys
exist and match the code’s expectations.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/locales/en/main.json (1)
2257-2257: HTML in translation string was previously flagged but not addressed.This line still contains embedded HTML (
<span class="font-bold italic">1 GB</span>), which was flagged in a previous review. The HTML markup and styling should be moved to the component, with the translation using a parameter like{size}instead.As per the previous review suggestion, refactor to:
- "maxFileSize": "Max file size: <span class=\"font-bold italic\">1 GB</span>", + "maxFileSize": "Max file size: {size}",Then apply styling in the consuming component.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/locales/en/main.json(4 hunks)src/platform/assets/components/UploadModelDialog.vue(2 hunks)
🧰 Additional context used
📓 Path-based instructions (9)
**/*.{ts,tsx,js,jsx,vue,json}
📄 CodeRabbit inference engine (AGENTS.md)
Code style: Use 2-space indentation, single quotes, no trailing semicolons, and 80-character line width (see
.prettierrc)
Files:
src/locales/en/main.jsonsrc/platform/assets/components/UploadModelDialog.vue
src/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
Files:
src/platform/assets/components/UploadModelDialog.vue
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/platform/assets/components/UploadModelDialog.vue
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/platform/assets/components/UploadModelDialog.vue
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/platform/assets/components/UploadModelDialog.vue
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/platform/assets/components/UploadModelDialog.vue
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/platform/assets/components/UploadModelDialog.vue
**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
**/*.vue: Use Vue 3 SFCs (Single File Components) with Composition API only; do not use Options API
Vue components must use<script setup lang="ts">for component logic
Use Vue 3.5 TypeScript style for default prop declaration with reactive props destructuring; do not usewithDefaultsor runtime props declaration
PreferuseModelto separately defining a prop and emit
Use Tailwind 4 utility classes for styling; avoid using<style>blocks in Vue components
Use semantic Tailwind values fromstyle.csstheme instead of thedark:variant; for example, usebg-node-component-surfaceinstead ofdark:prefixes
Always usecn()utility from@/utils/tailwindUtilto merge Tailwind class names; do not use:class="[]"syntax
Usereffor reactive state in Vue Composition API components
Implement computed properties withcomputed()from Vue; avoid using arefwith awatchif acomputedwould work instead
UsewatchandwatchEffectfor side effects in Vue components
Implement lifecycle hooks usingonMounted,onUpdated, and other Vue lifecycle functions
Useprovide/injectfor dependency injection; do not use dependency injection if a Store or shared composable would be simpler
Do not import Vue macros unnecessarily; only use when needed
Be judicious with addition of new refs or other state: prefer props, avoid redundantcomputed, and prefercomputedoverwatch
Use VueUse functions for performance-enhancing styles
In Vue Components, implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Implement proper error handling in Vue components
Follow Vue 3 style guide and naming conventions
Use vue-i18n in composition API for any string literals; place new translation entries insrc/locales/en/main.json
Avoid new usage of PrimeVue components; prefer shadcn/vue or Reka UI instead
Files:
src/platform/assets/components/UploadModelDialog.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Imports must be sorted and grouped by plugin; runpnpm formatbefore committing
Use TypeScript for type safety; never useanytype - use proper TypeScript types
Never useas anytype assertions; fix the underlying type issue instead
Use es-toolkit for utility functions
Write code that is expressive and self-documenting; avoid comments unless absolutely necessary; do not add or retain redundant comments
Keep functions short and functional
Minimize nesting in code (e.g., deeply nestediforforstatements); apply the Arrow Anti-Pattern principle
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions, especially testable ones
Files:
src/platform/assets/components/UploadModelDialog.vue
🧠 Learnings (16)
📚 Learning: 2025-12-09T04:35:43.971Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/locales/en/main.json:774-780
Timestamp: 2025-12-09T04:35:43.971Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, locale files other than `src/locales/en/main.json` are generated automatically on every release. Developers only need to add English (en) key/values in `src/locales/en/main.json` when making PRs; manual updates to other locale files (fr, ja, ko, ru, zh, zh-TW, es, ar, tr, etc.) are not required and should not be suggested in reviews.
Applied to files:
src/locales/en/main.json
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/{components,composables}/**/*.{ts,tsx,vue} : Use vue-i18n for ALL user-facing strings by adding them to `src/locales/en/main.json`
Applied to files:
src/locales/en/main.json
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Steps component with Stepper without panels
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Vue components must use `<script setup lang="ts">` for component logic
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use setup() function in Vue 3 Composition API
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing styles
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Implement lifecycle hooks with onMounted, onUpdated, etc.
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Use setup() function for component logic
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize Vue 3's Teleport component when needed
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Prefer `useModel` to separately defining a prop and emit
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Implement lifecycle hooks using `onMounted`, `onUpdated`, and other Vue lifecycle functions
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-12-09T03:49:52.828Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-12-09T21:40:12.361Z
Learnt from: benceruleanlu
Repo: Comfy-Org/ComfyUI_frontend PR: 7297
File: src/components/actionbar/ComfyActionbar.vue:33-43
Timestamp: 2025-12-09T21:40:12.361Z
Learning: In Vue single-file components, allow inline Tailwind CSS class strings for static classes and avoid extracting them into computed properties solely for readability. Prefer keeping static class names inline for simplicity and performance. For dynamic or conditional classes, use Vue bindings (e.g., :class) to compose classes.
Applies to all Vue files in the repository (e.g., src/**/*.vue) where Tailwind utilities are used for static styling.
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
🔇 Additional comments (2)
src/locales/en/main.json (2)
2267-2267: Good use of template parameters for i18n.This key correctly uses the
{sources}placeholder instead of embedding HTML or hardcoding provider names, which makes it properly translatable and maintainable.
2294-2295: Well-structured i18n additions for generic import flow.These new keys follow i18n best practices by keeping content as plain text without embedded HTML. They properly support the feature-flagged generic model import flow with clear, translatable messaging.
Also applies to: 2298-2298, 2300-2300
| <UploadModelUrlInput | ||
| v-if="currentStep === 1" | ||
| v-if="currentStep === 1 && flags.huggingfaceModelImportEnabled" | ||
| v-model="wizardData.url" | ||
| :error="uploadError" | ||
| class="flex-1" | ||
| /> | ||
| <UploadModelUrlInputCivitai | ||
| v-else-if="currentStep === 1" | ||
| v-model="wizardData.url" | ||
| :error="uploadError" | ||
| /> |
There was a problem hiding this comment.
Add consistent styling to both conditional rendering paths.
The feature-flagged UploadModelUrlInput includes class="flex-1" (line 10), but the fallback UploadModelUrlInputCivitai (line 12-16) does not. This creates layout inconsistency depending on the feature flag state.
Apply this diff to maintain consistent layout:
<UploadModelUrlInputCivitai
v-else-if="currentStep === 1"
v-model="wizardData.url"
:error="uploadError"
+ class="flex-1"
/>🤖 Prompt for AI Agents
In src/platform/assets/components/UploadModelDialog.vue around lines 6 to 16,
the feature-flagged UploadModelUrlInput has class="flex-1" but the fallback
UploadModelUrlInputCivitai does not, causing layout shifts; add the same
class="flex-1" prop to the UploadModelUrlInputCivitai element so both
conditional branches have identical styling and preserve consistent layout.
fb4195d to
6e8f864
Compare
dosubot
bot
added
size:L
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
src/platform/assets/importSources/huggingfaceImportSource.ts (1)
1-10: LGTM! Configuration follows established pattern.The HuggingFace import source configuration correctly implements the ImportSource interface and matches the structure of civitaiImportSource.
Note: The past review comment about missing i18n keys (huggingfaceLinkLabel, etc.) no longer applies. The current implementation uses a generic URL input component (UploadModelUrlInput.vue) with generic i18n keys rather than source-specific components for HuggingFace.
src/platform/assets/components/UploadModelUrlInputCivitai.vue (1)
22-28: Hardcoded file size - same issue as UploadModelUrlInput.The "1 GB" file size is hardcoded here as well, creating the same maintainability issue noted in UploadModelUrlInput.vue.
Consider making the file size limit configurable or moving it to a shared constant to ensure consistency across both input components.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (7)
src/locales/en/main.json(4 hunks)src/platform/assets/components/UploadModelUrlInput.vue(1 hunks)src/platform/assets/components/UploadModelUrlInputCivitai.vue(1 hunks)src/platform/assets/composables/useUploadModelWizard.ts(6 hunks)src/platform/assets/importSources/civitaiImportSource.ts(1 hunks)src/platform/assets/importSources/huggingfaceImportSource.ts(1 hunks)src/platform/assets/types/importSource.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (11)
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/components/UploadModelUrlInput.vuesrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/types/importSource.tssrc/platform/assets/composables/useUploadModelWizard.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safetyMinimize the surface area (exported values) of each module and composable
Files:
src/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/types/importSource.tssrc/platform/assets/composables/useUploadModelWizard.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/components/UploadModelUrlInput.vuesrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/types/importSource.tssrc/platform/assets/composables/useUploadModelWizard.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/components/UploadModelUrlInput.vuesrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/types/importSource.tssrc/platform/assets/composables/useUploadModelWizard.ts
**/*.{ts,tsx,js,jsx,vue,json}
📄 CodeRabbit inference engine (AGENTS.md)
Code style: Use 2-space indentation, single quotes, no trailing semicolons, and 80-character line width (see
.prettierrc)
Files:
src/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/components/UploadModelUrlInput.vuesrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/locales/en/main.jsonsrc/platform/assets/types/importSource.tssrc/platform/assets/composables/useUploadModelWizard.ts
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Imports must be sorted and grouped by plugin; runpnpm formatbefore committing
Use TypeScript for type safety; never useanytype - use proper TypeScript types
Never useas anytype assertions; fix the underlying type issue instead
Use es-toolkit for utility functions
Write code that is expressive and self-documenting; avoid comments unless absolutely necessary; do not add or retain redundant comments
Keep functions short and functional
Minimize nesting in code (e.g., deeply nestediforforstatements); apply the Arrow Anti-Pattern principle
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions, especially testable ones
Files:
src/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/components/UploadModelUrlInput.vuesrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/types/importSource.tssrc/platform/assets/composables/useUploadModelWizard.ts
src/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
Files:
src/platform/assets/components/UploadModelUrlInput.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vue
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/platform/assets/components/UploadModelUrlInput.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/composables/useUploadModelWizard.ts
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/platform/assets/components/UploadModelUrlInput.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/composables/useUploadModelWizard.ts
**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
**/*.vue: Use Vue 3 SFCs (Single File Components) with Composition API only; do not use Options API
Vue components must use<script setup lang="ts">for component logic
Use Vue 3.5 TypeScript style for default prop declaration with reactive props destructuring; do not usewithDefaultsor runtime props declaration
PreferuseModelto separately defining a prop and emit
Use Tailwind 4 utility classes for styling; avoid using<style>blocks in Vue components
Use semantic Tailwind values fromstyle.csstheme instead of thedark:variant; for example, usebg-node-component-surfaceinstead ofdark:prefixes
Always usecn()utility from@/utils/tailwindUtilto merge Tailwind class names; do not use:class="[]"syntax
Usereffor reactive state in Vue Composition API components
Implement computed properties withcomputed()from Vue; avoid using arefwith awatchif acomputedwould work instead
UsewatchandwatchEffectfor side effects in Vue components
Implement lifecycle hooks usingonMounted,onUpdated, and other Vue lifecycle functions
Useprovide/injectfor dependency injection; do not use dependency injection if a Store or shared composable would be simpler
Do not import Vue macros unnecessarily; only use when needed
Be judicious with addition of new refs or other state: prefer props, avoid redundantcomputed, and prefercomputedoverwatch
Use VueUse functions for performance-enhancing styles
In Vue Components, implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Implement proper error handling in Vue components
Follow Vue 3 style guide and naming conventions
Use vue-i18n in composition API for any string literals; place new translation entries insrc/locales/en/main.json
Avoid new usage of PrimeVue components; prefer shadcn/vue or Reka UI instead
Files:
src/platform/assets/components/UploadModelUrlInput.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vue
src/**/{services,composables}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/{services,composables}/**/*.{ts,tsx}: Useapi.apiURL()for backend endpoints instead of constructing URLs directly
Useapi.fileURL()for static file access instead of constructing URLs directly
Files:
src/platform/assets/composables/useUploadModelWizard.ts
🧠 Learnings (21)
📚 Learning: 2025-12-09T04:35:43.971Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/locales/en/main.json:774-780
Timestamp: 2025-12-09T04:35:43.971Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, locale files other than `src/locales/en/main.json` are generated automatically on every release. Developers only need to add English (en) key/values in `src/locales/en/main.json` when making PRs; manual updates to other locale files (fr, ja, ko, ru, zh, zh-TW, es, ar, tr, etc.) are not required and should not be suggested in reviews.
Applied to files:
src/platform/assets/importSources/huggingfaceImportSource.tssrc/locales/en/main.json
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/{components,composables}/**/*.{ts,tsx,vue} : Use vue-i18n for ALL user-facing strings by adding them to `src/locales/en/main.json`
Applied to files:
src/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/locales/en/main.jsonsrc/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
src/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/types/importSource.tssrc/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-12-13T11:03:11.264Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7416
File: src/stores/imagePreviewStore.ts:5-7
Timestamp: 2025-12-13T11:03:11.264Z
Learning: In the ComfyUI_frontend repository, lint rules require keeping 'import type' statements separate from non-type imports, even if importing from the same module. Do not suggest consolidating them into a single import statement. Ensure type imports remain on their own line (import type { ... } from 'module') and regular imports stay on separate lines.
Applied to files:
src/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/types/importSource.tssrc/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.
Applied to files:
src/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/components/UploadModelUrlInput.vuesrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/types/importSource.tssrc/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-12-09T03:49:52.828Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.
Applied to files:
src/platform/assets/components/UploadModelUrlInput.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vue
📚 Learning: 2025-12-09T21:40:12.361Z
Learnt from: benceruleanlu
Repo: Comfy-Org/ComfyUI_frontend PR: 7297
File: src/components/actionbar/ComfyActionbar.vue:33-43
Timestamp: 2025-12-09T21:40:12.361Z
Learning: In Vue single-file components, allow inline Tailwind CSS class strings for static classes and avoid extracting them into computed properties solely for readability. Prefer keeping static class names inline for simplicity and performance. For dynamic or conditional classes, use Vue bindings (e.g., :class) to compose classes.
Applies to all Vue files in the repository (e.g., src/**/*.vue) where Tailwind utilities are used for static styling.
Applied to files:
src/platform/assets/components/UploadModelUrlInput.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Applied to files:
src/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Define proper props and emits definitions in Vue components
Applied to files:
src/platform/assets/components/UploadModelUrlInputCivitai.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use vue-i18n in composition API for any string literals; place new translation entries in `src/locales/en/main.json`
Applied to files:
src/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Implement proper TypeScript types throughout the codebase
Applied to files:
src/platform/assets/types/importSource.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.{ts,tsx,vue} : Avoid mutable state; prefer immutability and assignment at point of declaration
Applied to files:
src/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.{ts,tsx,vue} : Imports must be sorted and grouped by plugin; run `pnpm format` before committing
Applied to files:
src/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Avoid using ts-expect-error; use proper TypeScript types instead
Applied to files:
src/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use vue-i18n for ALL UI strings
Applied to files:
src/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing styles
Applied to files:
src/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition API
Applied to files:
src/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive state
Applied to files:
src/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use `ref` for reactive state in Vue Composition API components
Applied to files:
src/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Implement computed() for derived state in Vue 3 Composition API
Applied to files:
src/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Implement computed properties with `computed()` from Vue; avoid using a `ref` with a `watch` if a `computed` would work instead
Applied to files:
src/platform/assets/composables/useUploadModelWizard.ts
🧬 Code graph analysis (3)
src/platform/assets/importSources/huggingfaceImportSource.ts (1)
src/platform/assets/types/importSource.ts (1)
ImportSource(9-24)
src/platform/assets/importSources/civitaiImportSource.ts (1)
src/platform/assets/types/importSource.ts (1)
ImportSource(9-24)
src/platform/assets/composables/useUploadModelWizard.ts (4)
src/composables/useFeatureFlags.ts (1)
useFeatureFlags(23-90)src/platform/assets/types/importSource.ts (2)
ImportSource(9-24)validateSourceUrl(29-38)src/platform/assets/importSources/civitaiImportSource.ts (1)
civitaiImportSource(6-10)src/platform/assets/importSources/huggingfaceImportSource.ts (1)
huggingfaceImportSource(6-10)
🔇 Additional comments (16)
src/platform/assets/types/importSource.ts (2)
26-38: LGTM! Validation logic is correct and robust.The function properly validates URLs against import source hostnames with:
- Exact hostname matching
- Subdomain support (e.g.,
www.huggingface.comatcheshuggingface.co)- Graceful error handling for malformed URLs
1-24: Consider exporting ImportSourceType for type safety.The
ImportSourceTypetype is only used internally within this module. While this works, exporting it would allow consumers to type-check source types more strictly (e.g., when working withsource.typevalues).Example usage if exported:
import type { ImportSourceType } from './importSource' function handleSource(sourceType: ImportSourceType) { // Type-safe handling of source types }⛔ Skipped due to learnings
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:34.324Z Learning: Applies to src/**/*.{ts,tsx,vue} : Implement proper TypeScript types throughout the codebaseLearnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.ts : Use TypeScript for type safetyLearnt from: christian-byrne Repo: Comfy-Org/ComfyUI_frontend PR: 7416 File: src/stores/imagePreviewStore.ts:5-7 Timestamp: 2025-12-13T11:03:11.264Z Learning: In the Comfy-Org/ComfyUI_frontend repository, linting rules enforce keeping `import type` statements separate from regular `import` statements, even when importing from the same module. Do not suggest consolidating them into a single import statement.Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:34.324Z Learning: Applies to src/**/stores/**/*.{ts,tsx} : Use TypeScript for type safety in state management storessrc/platform/assets/importSources/civitaiImportSource.ts (1)
1-10: LGTM! Configuration is correct and consistent.The Civitai import source configuration properly implements the ImportSource interface and follows the same pattern as the HuggingFace source.
src/platform/assets/components/UploadModelUrlInput.vue (2)
14-48: Verify feature-flag behavior for HuggingFace display.The component unconditionally displays both Civitai and HuggingFace logos/links in the provider attribution section. However, the HuggingFace import source is feature-flagged (
huggingfaceModelImportEnabled) elsewhere in the codebase.Ensure this aligns with the intended UX: should the HuggingFace attribution be visible even when the feature is disabled, or should it be conditionally rendered based on the feature flag?
If conditional rendering is needed, you can use the feature flag:
<script setup lang="ts"> import { useFeatureFlags } from '@/composables/useFeatureFlags' const { flags } = useFeatureFlags() // ... existing code </script> <template> <!-- In template --> <span v-if="flags.huggingfaceModelImportEnabled" class="inline-flex items-center gap-1"> <img src="/assets/images/hf-logo.svg" ... /> <a href="https://huggingface.co" ...>Hugging Face</a> </span> </template>
79-96: LGTM! Script setup follows Vue 3 composition API best practices.The component correctly implements:
- Type-safe props and emits
- Computed two-way binding for v-model
- Proper imports from PrimeVue
src/platform/assets/components/UploadModelUrlInputCivitai.vue (1)
69-86: LGTM! Script setup is correctly implemented.The component properly implements the composition API pattern with type-safe props, emits, and computed bindings.
src/locales/en/main.json (4)
2233-2238: LGTM! i18n keys properly use placeholders.The civitai link keys correctly use template parameters (
{exampleUrl},{download}) instead of embedded HTML, addressing the past review concern about HTML in translation strings.
2257-2257: LGTM! maxFileSize correctly uses template parameter.The key properly uses
{size}placeholder, addressing the past review concern.Note: The Vue components still hardcode "1 GB" instead of passing it dynamically, which was flagged in the component reviews.
2268-2268: LGTM! unsupportedUrlSource uses template parameter correctly.The key uses
{sources}placeholder to dynamically list supported import sources, providing a flexible error message.
2294-2303: LGTM! Upload model description keys follow i18n best practices.All keys properly use template parameters for dynamic content:
- URLs separated into distinct keys
- Size and other dynamic values use placeholders
- Clean separation of concerns
src/platform/assets/composables/useUploadModelWizard.ts (6)
1-14: LGTM! Imports are clean and properly organized.The new imports for i18n, feature flags, and import sources are all utilized in the code. Type imports are correctly separated as per project lint rules.
48-60: LGTM! Immutable array construction correctly addresses past review.The importSources array is now constructed immutably using a ternary expression instead of mutation with
push(), properly following the coding guidelines.The
detectedSourcecomputed correctly validates URLs against available sources using the new validation utility.
91-99: LGTM! URL validation properly refactored for extensibility.The validation logic now uses the detected source instead of hardcoded Civitai checks, making it extensible for future import sources. The error message is properly localized with dynamic source names.
105-120: LGTM! Filename decoding enables UTF-8 support with graceful error handling.The decoding logic properly handles URL-encoded filenames (e.g., Chinese characters) while safely falling back to the original value if decoding fails. This addresses the PR objective of "UTF-8 filename support."
200-211: LGTM! Source metadata properly tracked in uploads.The upload includes the detected source type in
user_metadata.source, enabling proper tracking of import sources. The fallback to 'unknown' is appropriate for edge cases.
247-266: LGTM! Public API correctly extended with detectedSource.The composable now exposes
detectedSourceto consumers, allowing UI components to react to the detected import source.
| <p v-else class="text-white"> | ||
| <i18n-t keypath="assetBrowser.maxFileSize" tag="span"> | ||
| <template #size> | ||
| <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text --> | ||
| <span class="font-bold italic">1 GB</span> | ||
| </template> | ||
| </i18n-t> | ||
| </p> |
There was a problem hiding this comment.
Hardcoded file size breaks i18n pattern.
The max file size is hardcoded as "1 GB" in the template, which undermines the i18n template parameter pattern. If the size limit changes or needs to vary, this requires template modifications.
Consider one of these approaches:
Option 1: Define size as a constant
const MAX_FILE_SIZE = '1 GB'Option 2: Update the i18n string to include the size
"maxFileSize": "Max file size: 1 GB"Option 3: Make it configurable via prop
const props = defineProps<{
modelValue: string
error?: string
maxFileSizeMB?: number
}>()
const maxFileSizeDisplay = computed(() =>
props.maxFileSizeMB ? `${props.maxFileSizeMB / 1024} GB` : '1 GB'
)🤖 Prompt for AI Agents
In src/platform/assets/components/UploadModelUrlInput.vue around lines 62 to 69,
the template currently hardcodes "1 GB" which breaks the i18n parameter pattern;
replace the hardcoded size with a dynamic value and pass it into the i18n
message: add a configurable source for the limit (either a local constant
MAX_FILE_SIZE or a prop like maxFileSizeMB with a small computed that formats
MB→GB), update the i18n key to accept a parameter (or keep the key and supply
the size param), and modify the <i18n-t> usage to inject that formatted size
instead of the hardcoded span so the displayed value is driven by code/config
rather than template text.
6e8f864 to
0718dce
Compare
🎭 Playwright Test Results✅ All tests passed! ⏰ Completed at: 12/18/2025, 09:32:17 AM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/17/2025, 10:24:58 PM UTC 🔗 Links🎉 Your Storybook is ready for review! |
There was a problem hiding this comment.
Actionable comments posted: 5
♻️ Duplicate comments (2)
src/platform/assets/components/UploadModelDialog.vue (1)
12-16: Add consistent styling to the fallback component.The
UploadModelUrlInputCivitaicomponent is missingclass="flex-1"which is present on the feature-flaggedUploadModelUrlInput(line 10). This creates layout inconsistency when the feature flag changes state.Apply this diff to maintain consistent layout:
<UploadModelUrlInputCivitai v-else-if="currentStep === 1" v-model="wizardData.url" :error="uploadError" + class="flex-1" />src/platform/assets/components/UploadModelUrlInput.vue (1)
62-66: Parameterize the max file size in the i18n translation.The
maxFileSizetranslation contains a hardcoded "1 GB" value within the HTML. Change the locale entry from"Max file size: <span class=\"font-bold italic\">1 GB</span>"to accept a parameter like"Max file size: <span class=\"font-bold italic\">{size}</span>", and pass the size when calling$t():$t('assetBrowser.maxFileSize', { size: '1 GB' }). This allows the file size limit to be configurable without editing translation files.
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (1)
public/assets/images/hf-logo.svgis excluded by!**/*.svg
📒 Files selected for processing (14)
src/components/graph/GraphCanvas.vue(1 hunks)src/composables/useFeatureFlags.ts(2 hunks)src/locales/en/main.json(4 hunks)src/platform/assets/components/UploadModelDialog.vue(2 hunks)src/platform/assets/components/UploadModelDialogHeader.vue(1 hunks)src/platform/assets/components/UploadModelFooter.vue(2 hunks)src/platform/assets/components/UploadModelUrlInput.vue(1 hunks)src/platform/assets/components/UploadModelUrlInputCivitai.vue(1 hunks)src/platform/assets/composables/useModelTypes.ts(1 hunks)src/platform/assets/composables/useUploadModelWizard.ts(6 hunks)src/platform/assets/importSources/civitaiImportSource.ts(1 hunks)src/platform/assets/importSources/huggingfaceImportSource.ts(1 hunks)src/platform/assets/types/importSource.ts(1 hunks)src/platform/remoteConfig/types.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (15)
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
src/**/*.{vue,ts}: Avoid usingrefandwatchtogether - usecomputedinstead if possible
Do not addrefif a prop would suffice; do not addcomputedif the ref/prop directly would work; usewatchonly whencomputedwon't accomplish the goal
Leverage VueUse functions for performance-enhancing styles
Files:
src/platform/assets/composables/useModelTypes.tssrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/components/UploadModelUrlInput.vuesrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/remoteConfig/types.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/composables/useFeatureFlags.tssrc/platform/assets/types/importSource.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
src/**/*.ts: Extract complex type definitions that are inlined in multiple related places - name them for reuse
Minimize the surface area (exported values) of each module and composable
Favor pure functions, especially testable ones
Files:
src/platform/assets/composables/useModelTypes.tssrc/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/remoteConfig/types.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/composables/useFeatureFlags.tssrc/platform/assets/types/importSource.ts
src/**/{services,composables}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/{services,composables}/**/*.{ts,tsx}: Useapi.apiURL()for backend endpoints instead of constructing URLs directly
Useapi.fileURL()for static file access instead of constructing URLs directly
Files:
src/platform/assets/composables/useModelTypes.tssrc/platform/assets/composables/useUploadModelWizard.tssrc/composables/useFeatureFlags.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
src/**/*.{ts,tsx,vue}: ESLint rules: Vue + TS rules, no floating promises, unused imports disallowed, i18n raw text restrictions in templates
Use es-toolkit for utility functions
Avoid mutable state - prefer immutability and assignment at point of declaration
Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Files:
src/platform/assets/composables/useModelTypes.tssrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/components/UploadModelUrlInput.vuesrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/remoteConfig/types.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/composables/useFeatureFlags.tssrc/platform/assets/types/importSource.ts
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/platform/assets/composables/useModelTypes.tssrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/components/UploadModelUrlInput.vuesrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/composables/useFeatureFlags.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/platform/assets/composables/useModelTypes.tssrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/components/UploadModelUrlInput.vuesrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/remoteConfig/types.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/composables/useFeatureFlags.tssrc/platform/assets/types/importSource.ts
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/platform/assets/composables/useModelTypes.tssrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/components/UploadModelUrlInput.vuesrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/composables/useFeatureFlags.ts
src/**/*.{js,ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript exclusively - no new JavaScript files
Files:
src/platform/assets/composables/useModelTypes.tssrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/components/UploadModelUrlInput.vuesrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/remoteConfig/types.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/composables/useFeatureFlags.tssrc/platform/assets/types/importSource.ts
src/**/*.{ts,tsx,vue,js}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,tsx,vue,js}: Indent with 2 spaces, use single quotes, no trailing semicolons, line width 80 - see.prettierrc
Sort and group imports by plugin, runpnpm formatbefore committing
Files:
src/platform/assets/composables/useModelTypes.tssrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/components/UploadModelUrlInput.vuesrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/remoteConfig/types.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/composables/useFeatureFlags.tssrc/platform/assets/types/importSource.ts
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Do not use function expressions - use function declarations instead when possible
Files:
src/platform/assets/composables/useModelTypes.tssrc/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/remoteConfig/types.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/composables/useFeatureFlags.tssrc/platform/assets/types/importSource.ts
src/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
src/**/*.vue: Vue 3 SFCs must use Composition API only - no Options API
Use<script setup lang="ts">for component logic
Use Tailwind 4 utility classes for styling - avoid<style>blocks
Usecn()utility from@/utils/tailwindUtilto merge Tailwind class names - never use:class="[]"syntax
Never use thedark:Tailwind variant - use semantic values fromstyle.csstheme instead (e.g.,bg-node-component-surface)
Use Vue 3.5+ TypeScript style default prop declaration with reactive destructuring - preferuseModelto prop/emit pairs, do not usewithDefaults
Do not import Vue macros unnecessarily
Use vue-i18n in composition API for string literals - place translation entries insrc/locales/en/main.json
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Avoid new usage of PrimeVue components
Files:
src/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelUrlInput.vuesrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vue
src/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsVue components must be named in PascalCase (e.g.,
MenuHamburger.vue)
Files:
src/components/graph/GraphCanvas.vue
src/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system package
Files:
src/components/graph/GraphCanvas.vue
src/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI strings
Files:
src/components/graph/GraphCanvas.vue
src/composables/**/*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Composables must follow the naming pattern
useXyz.ts
Files:
src/composables/useFeatureFlags.ts
🧠 Learnings (40)
📚 Learning: 2025-12-08T01:21:41.368Z
Learnt from: jtydhr88
Repo: Comfy-Org/ComfyUI_frontend PR: 7214
File: src/i18n.ts:97-98
Timestamp: 2025-12-08T01:21:41.368Z
Learning: In src/i18n.ts and related i18n code, use `Record<string, unknown>` for locale data structures (including custom nodes i18n data) to maintain consistency with existing patterns used in localeLoaders, nodeDefsLoaders, commandsLoaders, and settingsLoaders.
Applied to files:
src/platform/assets/composables/useModelTypes.ts
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
src/platform/assets/composables/useModelTypes.tssrc/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/remoteConfig/types.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/composables/useFeatureFlags.tssrc/platform/assets/types/importSource.ts
📚 Learning: 2025-12-13T11:03:11.264Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7416
File: src/stores/imagePreviewStore.ts:5-7
Timestamp: 2025-12-13T11:03:11.264Z
Learning: In the ComfyUI_frontend repository, lint rules require keeping 'import type' statements separate from non-type imports, even if importing from the same module. Do not suggest consolidating them into a single import statement. Ensure type imports remain on their own line (import type { ... } from 'module') and regular imports stay on separate lines.
Applied to files:
src/platform/assets/composables/useModelTypes.tssrc/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/remoteConfig/types.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/composables/useFeatureFlags.tssrc/platform/assets/types/importSource.ts
📚 Learning: 2025-12-17T00:40:09.635Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.stories.ts:45-55
Timestamp: 2025-12-17T00:40:09.635Z
Learning: Prefer pure function declarations over function expressions (e.g., use function foo() { ... } instead of const foo = () => { ... }) for pure functions in the repository. Function declarations are more functional-leaning, offer better hoisting clarity, and can improve readability and tooling consistency. Apply this guideline across TypeScript files in Comfy-Org/ComfyUI_frontend, including story and UI component code, except where a function expression is semantically required (e.g., callbacks, higher-order functions with closures).
Applied to files:
src/platform/assets/composables/useModelTypes.tssrc/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/remoteConfig/types.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/composables/useFeatureFlags.tssrc/platform/assets/types/importSource.ts
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.
Applied to files:
src/platform/assets/composables/useModelTypes.tssrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/components/UploadModelUrlInput.vuesrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/remoteConfig/types.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/composables/useFeatureFlags.tssrc/platform/assets/types/importSource.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Prefer emit/event-name for state changes over other communication patterns
Applied to files:
src/platform/assets/components/UploadModelFooter.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitch
Applied to files:
src/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Applied to files:
src/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Implement lifecycle hooks with onMounted, onUpdated, etc.
Applied to files:
src/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover
Applied to files:
src/platform/assets/components/UploadModelFooter.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Calendar component with DatePicker
Applied to files:
src/platform/assets/components/UploadModelFooter.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Dropdown component with Select
Applied to files:
src/platform/assets/components/UploadModelFooter.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Implement proper props and emits definitions
Applied to files:
src/platform/assets/components/UploadModelFooter.vue
📚 Learning: 2025-12-09T03:49:52.828Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.
Applied to files:
src/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelUrlInput.vuesrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vue
📚 Learning: 2025-12-09T21:40:12.361Z
Learnt from: benceruleanlu
Repo: Comfy-Org/ComfyUI_frontend PR: 7297
File: src/components/actionbar/ComfyActionbar.vue:33-43
Timestamp: 2025-12-09T21:40:12.361Z
Learning: In Vue single-file components, allow inline Tailwind CSS class strings for static classes and avoid extracting them into computed properties solely for readability. Prefer keeping static class names inline for simplicity and performance. For dynamic or conditional classes, use Vue bindings (e.g., :class) to compose classes.
Applies to all Vue files in the repository (e.g., src/**/*.vue) where Tailwind utilities are used for static styling.
Applied to files:
src/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelUrlInput.vuesrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vue
📚 Learning: 2025-12-16T22:26:49.463Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.vue:17-17
Timestamp: 2025-12-16T22:26:49.463Z
Learning: In Vue 3.5+ with <script setup>, when using defineProps<Props>() with partial destructuring (e.g., const { as = 'button', class: customClass = '' } = defineProps<Props>() ), props that are not destructured (e.g., variant, size) stay accessible by name in the template scope. This pattern is valid: you can destructure only a subset of props for convenience while referencing the remaining props directly in template expressions. Apply this guideline to Vue components across the codebase (all .vue files).
Applied to files:
src/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelUrlInput.vuesrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vue
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/{components,composables}/**/*.{ts,tsx,vue} : Use vue-i18n for ALL user-facing strings by adding them to `src/locales/en/main.json`
Applied to files:
src/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/locales/en/main.json
📚 Learning: 2025-12-17T01:01:03.609Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-17T01:01:03.609Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Avoid mutable state - prefer immutability and assignment at point of declaration
Applied to files:
src/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-12-17T01:01:03.609Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-17T01:01:03.609Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Never use `as any` type assertions - fix the underlying type issue
Applied to files:
src/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Avoid using ts-expect-error; use proper TypeScript types instead
Applied to files:
src/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Applied to files:
src/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/components/UploadModelUrlInputCivitai.vue
📚 Learning: 2025-12-17T01:01:03.609Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-17T01:01:03.609Z
Learning: Applies to src/**/*.vue : Use vue-i18n in composition API for string literals - place translation entries in `src/locales/en/main.json`
Applied to files:
src/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use vue-i18n for ALL UI strings
Applied to files:
src/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/components/UploadModelUrlInputCivitai.vue
📚 Learning: 2025-12-17T01:01:03.609Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-17T01:01:03.609Z
Learning: Applies to src/**/*.{ts,tsx,vue} : ESLint rules: Vue + TS rules, no floating promises, unused imports disallowed, i18n raw text restrictions in templates
Applied to files:
src/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing styles
Applied to files:
src/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition API
Applied to files:
src/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-12-17T01:01:03.609Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-17T01:01:03.609Z
Learning: Applies to src/**/*.{vue,ts} : Avoid using `ref` and `watch` together - use `computed` instead if possible
Applied to files:
src/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive state
Applied to files:
src/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-12-05T20:35:28.330Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7137
File: src/locales/en/main.json:2257-2272
Timestamp: 2025-12-05T20:35:28.330Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, vue-i18n pluralization uses a two-parameter pattern: `t('key', { count: value })` where the `count` property in the interpolation object automatically triggers plural selection from pipe-separated locale strings (e.g., "no items | 1 item | {count} items"). This is the correct pattern used throughout the codebase, as validated by Playwright tests.
Applied to files:
src/platform/assets/components/UploadModelUrlInput.vue
📚 Learning: 2025-12-09T04:35:43.971Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/locales/en/main.json:774-780
Timestamp: 2025-12-09T04:35:43.971Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, locale files other than `src/locales/en/main.json` are generated automatically on every release. Developers only need to add English (en) key/values in `src/locales/en/main.json` when making PRs; manual updates to other locale files (fr, ja, ko, ru, zh, zh-TW, es, ar, tr, etc.) are not required and should not be suggested in reviews.
Applied to files:
src/platform/assets/importSources/huggingfaceImportSource.tssrc/locales/en/main.json
📚 Learning: 2025-12-16T17:30:29.719Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7559
File: .storybook/preview.ts:61-61
Timestamp: 2025-12-16T17:30:29.719Z
Learning: In .storybook/preview.ts for the Comfy-Org/ComfyUI_frontend repository, using `document.body.classList.add('[&_*]:!font-inter')` is the correct approach for applying the Inter font to all Storybook story elements. The simpler `font-inter` class alone does not work in this context. This runtime arbitrary variant pattern is valid and should not be flagged as an issue.
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-12-17T01:01:03.609Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-17T01:01:03.609Z
Learning: Applies to src/**/*.vue : Use `<script setup lang="ts">` for component logic
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use setup() function in Vue 3 Composition API
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-12-17T01:01:03.609Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-17T01:01:03.609Z
Learning: Applies to src/**/*.vue : Use Vue 3.5+ TypeScript style default prop declaration with reactive destructuring - prefer `useModel` to prop/emit pairs, do not use `withDefaults`
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Use setup() function for component logic
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-12-17T01:01:03.609Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-17T01:01:03.609Z
Learning: Applies to src/**/*.vue : Utilize Vue 3's Teleport component when needed
Applied to files:
src/platform/assets/components/UploadModelDialog.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Define proper props and emits definitions in Vue components
Applied to files:
src/platform/assets/components/UploadModelUrlInputCivitai.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Chips component with AutoComplete with multiple enabled
Applied to files:
src/platform/assets/components/UploadModelUrlInputCivitai.vue
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Implement proper TypeScript types throughout the codebase
Applied to files:
src/platform/assets/types/importSource.ts
🧬 Code graph analysis (3)
src/platform/assets/importSources/huggingfaceImportSource.ts (1)
src/platform/assets/types/importSource.ts (1)
ImportSource(9-24)
src/platform/assets/importSources/civitaiImportSource.ts (1)
src/platform/assets/types/importSource.ts (1)
ImportSource(9-24)
src/composables/useFeatureFlags.ts (2)
src/platform/remoteConfig/remoteConfig.ts (1)
remoteConfig(22-22)src/scripts/api.ts (1)
api(1306-1306)
🪛 Biome (2.1.2)
src/composables/useFeatureFlags.ts
[error] 18-18: expected , but instead found HUGGINGFACE_MODEL_IMPORT_ENABLED
Remove HUGGINGFACE_MODEL_IMPORT_ENABLED
(parse)
🪛 GitHub Actions: CI: Lint Format
src/composables/useFeatureFlags.ts
[error] 18-18: Expected , or } but found Identifier (likely missing comma after previous enum member: HUGGINGFACE_MODEL_IMPORT_ENABLED).
🪛 GitHub Actions: CI: Size Data
src/composables/useFeatureFlags.ts
[error] 18-18: vue-tsc --noEmit: TS1357 An enum member name must be followed by a ',', '=', or '}'.
🪛 GitHub Actions: CI: Tests Storybook
src/composables/useFeatureFlags.ts
[error] 18-18: ESBuild: Expected "," before "HUGGINGFACE_MODEL_IMPORT_ENABLED" in enum.
🪛 GitHub Check: collect
src/composables/useFeatureFlags.ts
[failure] 18-18:
An enum member name must be followed by a ',', '=', or '}'.
🪛 GitHub Check: setup
src/composables/useFeatureFlags.ts
[failure] 18-18:
An enum member name must be followed by a ',', '=', or '}'.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: merge-reports
- GitHub Check: test
🔇 Additional comments (16)
src/platform/remoteConfig/types.ts (1)
42-42: LGTM! Feature flag follows existing patterns.The addition of
huggingface_model_import_enabledfollows the established naming convention and pattern for other feature flags in the RemoteConfig type.src/platform/assets/composables/useModelTypes.ts (1)
53-58: LGTM! Sorting improves UX.Adding alphabetical sorting to the model types list is a good UX improvement that makes it easier for users to find model types. The use of
localeCompareensures proper locale-aware string comparison.src/platform/assets/components/UploadModelDialogHeader.vue (1)
1-29: LGTM! Clean feature flag implementation.The header component properly uses feature flags to conditionally render content and dynamically select the appropriate i18n key. The implementation follows Vue 3 Composition API best practices with proper use of
computedfor reactive titleKey selection.src/platform/assets/importSources/huggingfaceImportSource.ts (1)
1-10: LGTM! Import source configuration is well-structured.The Hugging Face import source definition follows the established pattern and correctly implements the
ImportSourceinterface. The configuration is concise and matches the structure of the Civitai import source.src/platform/assets/importSources/civitaiImportSource.ts (1)
1-10: LGTM! Import source configuration is consistent.The Civitai import source definition correctly implements the
ImportSourceinterface and maintains consistency with the Hugging Face import source pattern.src/platform/assets/components/UploadModelDialog.vue (1)
55-55: LGTM!The feature flag integration follows Vue 3 Composition API best practices with proper imports and composable usage.
Also applies to: 60-60, 65-65
src/composables/useFeatureFlags.ts (1)
77-87: LGTM!The
huggingfaceModelImportEnabledgetter correctly follows the established pattern of checking remote config first before falling back to websocket feature flags.src/platform/assets/types/importSource.ts (1)
29-38: LGTM!The
validateSourceUrlfunction implements robust URL validation with proper error handling, case-insensitive hostname matching, and subdomain support.src/platform/assets/components/UploadModelUrlInputCivitai.vue (2)
30-46: LGTM!The component follows Vue 3 Composition API best practices with proper TypeScript types for props and emits, and uses the standard computed pattern for v-model binding.
8-9: No action required. The i18n strings (assetBrowser.uploadModelDescription2,uploadModelDescription3,civitaiLinkLabel,civitaiLinkExample) are static, controlled locale content with no dynamic or user-generated interpolation. Per vue-i18n documentation, usingv-htmlwith trusted, hardcoded i18n content is appropriate and presents no XSS risk.src/platform/assets/composables/useUploadModelWizard.ts (6)
3-3: LGTM!The new imports are properly structured with type imports separated from value imports, following the repository's coding guidelines.
Also applies to: 5-5, 7-8, 11-12
48-60: LGTM!The import sources array construction now follows immutability principles by using a ternary expression instead of const mutation. The
detectedSourcecomputed property cleanly implements source detection using the validation utility.
91-99: LGTM!The source validation correctly uses the
detectedSourcecomputed property and provides a properly internationalized error message with dynamic source listing.
105-119: LGTM!The filename decoding implementation uses defensive programming with try-catch blocks to handle URL-encoded filenames gracefully, falling back to the original value if decoding fails.
200-200: LGTM!The detected source is safely accessed using optional chaining and nullish coalescing, providing a sensible fallback to 'unknown' when no source is detected.
Also applies to: 206-206
247-266: LGTM!The addition of
detectedSourceto the composable's return value properly exposes the computed source detection to consumers, supporting the feature's URL-based source detection requirements.
| "finish": "Finish", | ||
| "jobId": "Job ID", | ||
| "loadingModels": "Loading {type}...", | ||
| "maxFileSize": "Max file size: <span class=\"font-bold italic\">1 GB</span>", |
There was a problem hiding this comment.
Avoid embedded HTML in i18n strings.
Line 2308 contains embedded HTML markup in the translation string:
"maxFileSize": "Max file size: <span class=\"font-bold italic\">1 GB</span>"This pattern was previously flagged and marked as addressed (commits 6e291e6 to ae03cc9), but has reappeared in the new keys. Embedding HTML in translations breaks i18n best practices because:
- Translators must preserve exact HTML syntax and classes
- Styling should be separated from content
- HTML in translation strings makes them fragile
Refactor to use template parameters:
"maxFileSize": "Max file size: {size}"Then apply the styling in the Vue component that uses this string. For example:
<template>
<span>
{{ $t('assetBrowser.maxFileSize', { size: '' }) }}
<span class="font-bold italic">1 GB</span>
</span>
</template>Or use i18n's built-in formatting to inject styled content.
🤖 Prompt for AI Agents
In src/locales/en/main.json around line 2308, the translation contains embedded
HTML ("Max file size: <span class=\"font-bold italic\">1 GB</span>"); remove the
HTML and change the string to use a placeholder, e.g. "Max file size: {size}",
then update the Vue component(s) that consume this key to inject the size value
and apply the font-bold italic classes in the template (or use i18n message
formatting/HTML-safe components) so styling is handled in the view layer rather
than inside the i18n string.
| data-attr="upload-model-step1-continue-button" | ||
| :disabled="!canFetchMetadata || isFetchingMetadata" | ||
| @click="emit('fetchMetadata')" | ||
| :on-click="() => emit('fetchMetadata')" |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
🧩 Analysis chain
🏁 Script executed:
# Find IconTextButton.vue and examine its props/emits
fd -e vue IconTextButton src/components/button/
cat src/components/button/IconTextButton.vue
# Also check UploadModelFooter.vue context
cat src/platform/assets/components/UploadModelFooter.vue | head -80Repository: Comfy-Org/ComfyUI_frontend
Length of output: 3799
IconTextButton uses an onClick prop handler, not native click events—inline arrow functions can be optimized.
The :on-click binding is correct and follows the component's interface. However, wrapping emit() calls with inline arrow functions creates new function instances on each render. Extract these to named handler methods for better performance and readability.
Consider refactoring to:
const handleFetchMetadata = () => emit('fetchMetadata')
const handleUpload = () => emit('upload')Then use :on-click="handleFetchMetadata" instead of :on-click="() => emit('fetchMetadata')".
🤖 Prompt for AI Agents
In src/platform/assets/components/UploadModelFooter.vue around line 45, inline
arrow functions are being passed to the IconTextButton :on-click prop which
creates a new function on every render; replace these with named handler
functions (e.g. handleFetchMetadata and handleUpload) defined in the component
setup, each calling emit('fetchMetadata') and emit('upload') respectively,
return those handlers from setup so the template can use
:on-click="handleFetchMetadata" and :on-click="handleUpload" instead of inline
arrow functions to improve performance and readability.
| <span class="inline-flex items-center gap-1 flex-wrap mt-2"> | ||
| <!-- eslint-disable @intlify/vue-i18n/no-raw-text --> | ||
| <span class="inline-flex items-center gap-1"> | ||
| <img | ||
| src="/assets/images/civitai.svg" | ||
| alt="Civitai" | ||
| class="w-4 h-4" | ||
| /> | ||
| <a | ||
| href="https://civitai.com" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| class="text-muted underline" | ||
| > | ||
| Civitai</a | ||
| ><span>,</span> | ||
| </span> | ||
| <span class="inline-flex items-center gap-1"> | ||
| <img | ||
| src="/assets/images/hf-logo.svg" | ||
| alt="Hugging Face" | ||
| class="w-4 h-4" | ||
| /> | ||
| <a | ||
| href="https://huggingface.co" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| class="text-muted underline" | ||
| > | ||
| Hugging Face | ||
| </a> | ||
| </span> | ||
| <!-- eslint-enable @intlify/vue-i18n/no-raw-text --> | ||
| </span> |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider i18n for brand name presentation.
While "Civitai" and "Hugging Face" are proper nouns, the presentation structure (including punctuation and formatting) may vary across locales. The current implementation uses eslint-disable to bypass i18n requirements.
Consider moving this to an i18n template for better localization control:
// In src/locales/en/main.json
"supportedPlatforms": "Supported platforms: <a href='https://civitai.com'>Civitai</a>, <a href='https://huggingface.co'>Hugging Face</a>"Then in template:
<p v-html="$t('assetBrowser.supportedPlatforms')"></p>This approach allows locales to control the presentation format while keeping brand names intact.
As per coding guidelines, all user-facing strings should use vue-i18n.
| /** | ||
| * Supported model import sources | ||
| */ | ||
| type ImportSourceType = 'civitai' | 'huggingface' |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Export ImportSourceType for type consistency.
The ImportSourceType union type is currently not exported, but consumers may need to reference it directly for type annotations, especially when working with the ImportSource.type property.
Apply this diff to export the type:
/**
* Supported model import sources
*/
-type ImportSourceType = 'civitai' | 'huggingface'
+export type ImportSourceType = 'civitai' | 'huggingface'📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| /** | |
| * Supported model import sources | |
| */ | |
| type ImportSourceType = 'civitai' | 'huggingface' | |
| /** | |
| * Supported model import sources | |
| */ | |
| export type ImportSourceType = 'civitai' | 'huggingface' |
🤖 Prompt for AI Agents
In src/platform/assets/types/importSource.ts around lines 1 to 4, the
ImportSourceType union is defined but not exported; update the file to export
the type so external consumers can reference it (e.g., change the declaration to
an exported type) and ensure any related exports or imports in the codebase are
adjusted to use the exported ImportSourceType.
- Add HuggingFace as a model import source alongside CivitAI - Support URL-encoded filenames (UTF-8 characters like Chinese) - Sort model types alphabetically for easier selection - Add feature flag for HuggingFace import enablement - Implement import source handler pattern for extensibility - Use proper i18n template parameters for error messages 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Remove getLabelKey(), getPlaceholderKey(), and getExampleKey() methods as they were never called
Replace class-based ImportSourceHandler with simple configuration objects - Change ImportSourceHandler interface to ImportSource - Extract validation logic to validateSourceUrl function - Remove unnecessary class boilerplate - Hostnames are now declarative arrays instead of hardcoded logic
- Use ternary operator instead of spread for clearer intent - Make ImportSourceType internal (not exported) since it's only used within the module
luke-mino-altherr
force-pushed
the
feat/huggingface-model-import
branch
from
0718dce to
6eb268c
Compare
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.21 MB (baseline 3.2 MB) • 🔴 +725 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 1 MB (baseline 1 MB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 297 kB (baseline 297 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 189 kB (baseline 184 kB) • 🔴 +5.07 kBReusable component library chunks
Status: 8 added / 8 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 2 added / 2 removed Utilities & Hooks — 3.18 kB (baseline 3.18 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 8.45 MB (baseline 8.45 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 3.44 MB (baseline 3.44 MB) • ⚪ 0 BBundles that do not match a named category
Status: 20 added / 20 removed |
🔧 Auto-fixes AppliedThis PR has been automatically updated to fix linting and formatting issues.
Changes made:
|
benceruleanlu
left a comment
benceruleanlu
left a comment
There was a problem hiding this comment.
LGTM, some tests and stories could be beneficial
| 'update:modelValue': [value: string] | ||
| }>() | ||
| const url = computed({ |
There was a problem hiding this comment.
nit: could use defineModel here
| /** | ||
| * Check if a URL belongs to a specific import source | ||
| */ | ||
| export function validateSourceUrl(url: string, source: ImportSource): boolean { | ||
| try { | ||
| const hostname = new URL(url).hostname.toLowerCase() | ||
| return source.hostnames.some( | ||
| (h) => hostname === h || hostname.endsWith(`.${h}`) | ||
| ) | ||
| } catch { | ||
| return false | ||
| } | ||
| } |
There was a problem hiding this comment.
nit: maybe this moves out of the types/ folder?
| tags, | ||
| user_metadata: { | ||
| source: 'civitai', | ||
| source: source?.type ?? 'unknown', |
There was a problem hiding this comment.
nit: this unknown magic string looks scary
christian-byrne
added
needs-backport
christian-byrne
left a comment
christian-byrne
left a comment
There was a problem hiding this comment.
Potentially we want to add "civitai" and "huggingface" to this
Line 13 in c0c2849
| <!-- Step 1: Enter URL --> | ||
| <UploadModelUrlInput | ||
| v-if="currentStep === 1" | ||
| v-if="currentStep === 1 && flags.huggingfaceModelImportEnabled" |
There was a problem hiding this comment.
nit: the currentStep structure seems like a great place to use an enum
| </p> | ||
| <p | ||
| v-else | ||
| class="text-white" |
There was a problem hiding this comment.
question: Should this text always be white? Even in light mode?
| </div> | ||
|
|
||
| <div class="flex flex-col gap-2"> | ||
| <label class="mb-0" v-html="$t('assetBrowser.civitaiLinkLabel')"> </label> |
There was a problem hiding this comment.
nit: Is it possible to do this with v-html?
Summary
Adds HuggingFace as a model import source alongside CivitAI, with improved UX for model type selection and UTF-8 filename support.
Changes
huggingfaceModelImportEnabledflag for gradual rolloutTechnical Details
ImportSourceHandlerinterface for extensibility┆Issue is synchronized with this Notion page by Unito