[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
📝 WalkthroughWalkthroughThis pull request adds support for importing Hugging Face models alongside Civitai through a new feature flag. It introduces a pluggable import source system, updates UI components with feature-flag-based conditional rendering, and enhances the upload wizard with dynamic source detection and metadata handling. Changes
Sequence DiagramsequenceDiagram
actor User
participant UploadDialog as Upload Dialog
participant URLInput as URL Input<br/>(Generic or Civitai)
participant Wizard as useUploadModelWizard
participant Validator as validateSourceUrl
participant API as API
User->>UploadDialog: Opens upload dialog
UploadDialog->>URLInput: Renders based on feature flag
User->>URLInput: Enters model URL
URLInput->>Wizard: Updates wizardData.url
Wizard->>Wizard: Computes detectedSource<br/>from importSources[]
Wizard->>Validator: validateSourceUrl(url, source)
Validator-->>Wizard: Returns hostname match result
alt Source detected
Wizard->>API: Fetch model metadata from URL
API-->>Wizard: Returns metadata (name,<br/>filename, tags, etc.)
Wizard->>Wizard: Decode URL-encoded fields<br/>Prefill form (name, preview, tags)
Wizard->>Wizard: Infer model type from tags
else No valid source
Wizard->>Wizard: Set error with list of<br/>supported sources
end
User->>UploadDialog: Clicks upload
alt Valid detectedSource exists
Wizard->>API: Upload with source.type<br/>in user_metadata
API-->>User: Upload success
else No source
Wizard->>User: Show validation error
end
Possibly related PRs
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (15)
🧰 Additional context used📓 Path-based instructions (13)src/**/*.{vue,ts}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*.ts📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/*.{vue,ts,tsx}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx,vue,js,jsx,json,css}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
src/**/*.vue📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/{composables,components}/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/{components,composables}/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
**/*.vue📄 CodeRabbit inference engine (AGENTS.md)
Files:
src/**/{services,composables}/**/*.{ts,tsx}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
**/**/use[A-Z]*.ts📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (47)📚 Learning: 2025-12-09T04:35:43.971ZApplied to files:
📚 Learning: 2025-11-24T19:47:34.324ZApplied to files:
📚 Learning: 2025-12-09T03:39:54.501ZApplied to files:
📚 Learning: 2025-12-13T11:03:11.264ZApplied to files:
📚 Learning: 2025-12-17T00:40:09.635ZApplied to files:
📚 Learning: 2025-12-11T12:25:15.470ZApplied to files:
📚 Learning: 2025-12-21T06:04:12.548ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-12-18T21:15:46.862ZApplied to files:
📚 Learning: 2025-12-09T03:49:52.828ZApplied to files:
📚 Learning: 2025-12-17T00:40:17.361ZApplied to files:
📚 Learning: 2025-12-21T06:04:12.548ZApplied to files:
📚 Learning: 2025-11-24T19:47:02.860ZApplied to files:
📚 Learning: 2025-12-21T06:04:12.548ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-12-21T06:04:12.548ZApplied to files:
📚 Learning: 2025-12-05T06:11:09.383ZApplied to files:
📚 Learning: 2025-12-09T21:40:12.361ZApplied to files:
📚 Learning: 2025-12-16T22:26:49.463ZApplied to files:
📚 Learning: 2025-12-18T02:07:38.870ZApplied to files:
📚 Learning: 2025-12-21T01:06:02.786ZApplied to files:
📚 Learning: 2025-11-24T19:47:02.860ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-11-24T19:47:34.324ZApplied to files:
📚 Learning: 2025-12-21T06:04:12.548ZApplied to files:
📚 Learning: 2025-12-05T20:35:28.330ZApplied to files:
📚 Learning: 2025-12-21T06:04:12.548ZApplied to files:
📚 Learning: 2025-12-21T06:04:12.548ZApplied to files:
📚 Learning: 2025-11-24T19:47:34.324ZApplied to files:
📚 Learning: 2025-11-24T19:47:02.860ZApplied to files:
📚 Learning: 2025-11-24T19:47:02.860ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-11-24T19:47:02.860ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-12-21T06:04:12.548ZApplied to files:
📚 Learning: 2025-12-21T06:04:12.548ZApplied to files:
📚 Learning: 2025-12-16T17:30:29.719ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-11-24T19:47:02.860ZApplied to files:
📚 Learning: 2025-11-24T19:47:02.860ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2025-11-24T19:47:02.860ZApplied to files:
📚 Learning: 2025-12-21T06:04:12.548ZApplied to files:
📚 Learning: 2025-12-21T06:04:12.548ZApplied to files:
📚 Learning: 2025-12-08T01:21:41.368ZApplied to files:
📚 Learning: 2025-11-24T19:47:34.324ZApplied to files:
🧬 Code graph analysis (5)src/platform/assets/importSources/huggingfaceImportSource.ts (1)
src/platform/assets/composables/useUploadModelWizard.ts (5)
src/platform/assets/utils/importSourceUtil.ts (1)
src/composables/useFeatureFlags.ts (2)
src/platform/assets/importSources/civitaiImportSource.ts (1)
🔇 Additional comments (11)
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.
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.
luke-mino-altherr
force-pushed
the
feat/huggingface-model-import
branch
from
6e8f864 to
0718dce
Compare
🎭 Playwright Test Results⏰ Completed at: 12/22/2025, 07:34:17 PM 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/22/2025, 07:24:23 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.
| /** | ||
| * 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.
0718dce to
6eb268c
Compare
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.19 MB (baseline 3.19 MB) • 🔴 +484 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 996 kB (baseline 996 kB) • ⚪ 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 — 295 kB (baseline 295 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 196 kB (baseline 186 kB) • 🔴 +9.99 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 — 1.41 kB (baseline 1.41 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 9.1 MB (baseline 9.1 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
🔧 Auto-fixes AppliedThis PR has been automatically updated to fix linting and formatting issues.
Changes made:
|
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 UploadModelUrlInputCivitai component lacks the
class="flex-1"that is present on UploadModelUrlInput (line 10), causing layout inconsistency between the two feature-flag branches.🔎 Proposed fix
<UploadModelUrlInputCivitai v-else-if="currentStep === 1" v-model="wizardData.url" :error="uploadError" + class="flex-1" />src/platform/assets/types/importSource.ts (1)
4-4: Consider exporting ImportSourceType for better type reusability.While consumers can access the type via
ImportSource['type'], directly exportingImportSourceTypewould provide cleaner and more explicit type references for code that needs to work with source type strings independently.🔎 Proposed change
/** * Supported model import sources */ -type ImportSourceType = 'civitai' | 'huggingface' +export type ImportSourceType = 'civitai' | 'huggingface'
📜 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 (16)
.i18nrc.cjssrc/components/graph/GraphCanvas.vuesrc/composables/useFeatureFlags.tssrc/locales/en/main.jsonsrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelUrlInput.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/composables/useModelTypes.tssrc/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/types/importSource.tssrc/platform/assets/utils/importSourceUtil.tssrc/platform/remoteConfig/types.ts
🧰 Additional context used
📓 Path-based instructions (16)
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/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/components/UploadModelUrlInput.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/components/graph/GraphCanvas.vuesrc/platform/remoteConfig/types.tssrc/platform/assets/utils/importSourceUtil.tssrc/composables/useFeatureFlags.tssrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/types/importSource.tssrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/composables/useModelTypes.tssrc/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/components/UploadModelUrlInput.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/components/graph/GraphCanvas.vuesrc/platform/remoteConfig/types.tssrc/platform/assets/utils/importSourceUtil.tssrc/composables/useFeatureFlags.tssrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/types/importSource.tssrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/composables/useModelTypes.tssrc/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/components/UploadModelUrlInput.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/components/graph/GraphCanvas.vuesrc/composables/useFeatureFlags.tssrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/composables/useModelTypes.tssrc/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/components/UploadModelUrlInput.vue
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/graph/GraphCanvas.vuesrc/platform/remoteConfig/types.tssrc/platform/assets/utils/importSourceUtil.tssrc/composables/useFeatureFlags.tssrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/types/importSource.tssrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/composables/useModelTypes.tssrc/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/components/UploadModelUrlInput.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/components/graph/GraphCanvas.vuesrc/composables/useFeatureFlags.tssrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/composables/useModelTypes.tssrc/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/components/UploadModelUrlInputCivitai.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 components
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
**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
**/*.vue: Use Vue 3.5+ with TypeScript in.vuefiles, exclusively using Composition API with<script setup lang="ts">syntax
Use Tailwind 4 for styling in Vue components; avoid<style>blocks
Name Vue components using PascalCase (e.g.,MenuHamburger.vue)
Use Vue 3.5 TypeScript-style default prop declaration with reactive props destructuring; do not usewithDefaultsor runtime props declaration
Prefercomputed()overrefwithwatchwhen deriving values
PreferuseModelover separately defining prop and emit for two-way binding
Usevue-i18nin composition API for string literals; place new translation entries insrc/locales/en/main.json
Usecn()utility function from@/utils/tailwindUtilfor merging Tailwind class names; do not use:class="[]"syntax
Do not use thedark:Tailwind variant; use semantic values from thestyle.csstheme instead (e.g.,bg-node-component-surface)
Do not use!importantor the!important prefix for Tailwind classes; find and correct interfering!importantclasses instead
Avoid new usage of PrimeVue components; use VueUse, shadcn/vue, or Reka UI instead
Leverage VueUse functions for performance-enhancing styles in Vue components
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
Files:
src/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/components/UploadModelUrlInput.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Use TypeScript exclusively; do not write new JavaScript code
Use sorted and grouped imports organized by plugin/source
Enforce ESLint rules including Vue + TypeScript rules, disallow floating promises, disallow unused imports, and restrict i18n raw text in templates
Do not useanytype oras anytype assertions; fix the underlying type issue instead
Write code that is expressive and self-documenting; avoid redundant comments and clean as you go
Keep functions short and functional; minimize nesting and follow the arrow anti-pattern
Avoid mutable state; prefer immutability and assignment at point of declaration
Use function declarations instead of function expressions when possible
Use es-toolkit for utility functions
Implement proper error handling in code
Files:
src/components/graph/GraphCanvas.vuesrc/platform/remoteConfig/types.tssrc/platform/assets/utils/importSourceUtil.tssrc/composables/useFeatureFlags.tssrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/types/importSource.tssrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/composables/useModelTypes.tssrc/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/components/UploadModelUrlInput.vue
**/*.{ts,tsx,vue,js,jsx,json,css}
📄 CodeRabbit inference engine (AGENTS.md)
Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, and 80-character line width
Files:
src/components/graph/GraphCanvas.vuesrc/platform/remoteConfig/types.tssrc/platform/assets/utils/importSourceUtil.tssrc/composables/useFeatureFlags.tssrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/types/importSource.tssrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/composables/useModelTypes.tssrc/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/components/UploadModelUrlInput.vuesrc/locales/en/main.json
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
Files:
src/platform/remoteConfig/types.tssrc/platform/assets/utils/importSourceUtil.tssrc/composables/useFeatureFlags.tssrc/platform/assets/types/importSource.tssrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/composables/useModelTypes.tssrc/platform/assets/composables/useUploadModelWizard.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Minimize the surface area (exported values) of each module and composable
Files:
src/platform/remoteConfig/types.tssrc/platform/assets/utils/importSourceUtil.tssrc/composables/useFeatureFlags.tssrc/platform/assets/types/importSource.tssrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/composables/useModelTypes.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/composables/useFeatureFlags.tssrc/platform/assets/composables/useModelTypes.tssrc/platform/assets/composables/useUploadModelWizard.ts
**/**/use[A-Z]*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Name composables using the pattern
useXyz.ts
Files:
src/composables/useFeatureFlags.tssrc/platform/assets/composables/useModelTypes.tssrc/platform/assets/composables/useUploadModelWizard.ts
🧠 Learnings (45)
📚 Learning: 2025-12-18T20:39:30.137Z
Learnt from: jtydhr88
Repo: Comfy-Org/ComfyUI_frontend PR: 7621
File: src/components/load3d/Load3DScene.vue:4-4
Timestamp: 2025-12-18T20:39:30.137Z
Learning: In src/components/load3d/Load3DScene.vue, the scoped `<style>` block with `!important` declarations for the canvas element is necessary because Three.js dynamically creates the canvas with inline styles, preventing direct application of Tailwind classes. This is a valid exception to the Tailwind-only styling guideline.
Applied to files:
src/components/graph/GraphCanvas.vue
📚 Learning: 2025-12-21T06:04:12.548Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-21T06:04:12.548Z
Learning: Applies to **/*.{ts,tsx,vue} : Use sorted and grouped imports organized by plugin/source
Applied to files:
src/components/graph/GraphCanvas.vuesrc/platform/assets/types/importSource.tssrc/platform/assets/composables/useModelTypes.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/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.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/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/components/UploadModelUrlInput.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/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/components/UploadModelUrlInput.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/components/graph/GraphCanvas.vuesrc/platform/remoteConfig/types.tssrc/platform/assets/utils/importSourceUtil.tssrc/composables/useFeatureFlags.tssrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/types/importSource.tssrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/composables/useModelTypes.tssrc/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/components/UploadModelUrlInput.vue
📚 Learning: 2025-12-18T02:07:38.870Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7598
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:131-131
Timestamp: 2025-12-18T02:07:38.870Z
Learning: Tailwind CSS v4 safe utilities (e.g., items-center-safe, justify-*-safe, place-*-safe) are allowed in Vue components under src/ and in story files. Do not flag these specific safe variants as invalid when reviewing code in src/**/*.vue or related stories.
Applied to files:
src/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/components/UploadModelUrlInput.vue
📚 Learning: 2025-12-18T21:15:46.862Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7603
File: src/components/queue/QueueOverlayHeader.vue:49-59
Timestamp: 2025-12-18T21:15:46.862Z
Learning: In the ComfyUI_frontend repository, for Vue components, do not add aria-label to buttons that have visible text content (e.g., buttons containing <span> text). The visible text provides the accessible name. Use aria-label only for elements without visible labels (e.g., icon-only buttons). If a button has no visible label, provide a clear aria-label or associate with an aria-labelledby describing its action.
Applied to files:
src/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/components/UploadModelUrlInput.vue
📚 Learning: 2025-12-21T01:06:02.786Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7649
File: src/components/graph/selectionToolbox/ColorPickerButton.vue:15-18
Timestamp: 2025-12-21T01:06:02.786Z
Learning: In Comfy-Org/ComfyUI_frontend, in Vue component files, when a filled icon is required (e.g., 'pi pi-circle-fill'), you may mix PrimeIcons with Lucide icons since Lucide lacks filled variants. This mixed usage is acceptable when one icon library does not provide an equivalent filled icon. Apply consistently across Vue components in the src directory where icons are used, and document the rationale when a mixed approach is chosen.
Applied to files:
src/components/graph/GraphCanvas.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/components/UploadModelDialogHeader.vuesrc/platform/assets/components/UploadModelFooter.vuesrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/components/UploadModelUrlInput.vue
📚 Learning: 2025-12-18T16:03:02.066Z
Learnt from: henrikvilhelmberglund
Repo: Comfy-Org/ComfyUI_frontend PR: 7617
File: src/components/actionbar/ComfyActionbar.vue:301-308
Timestamp: 2025-12-18T16:03:02.066Z
Learning: In the ComfyUI frontend queue system, useQueuePendingTaskCountStore().count indicates the number of tasks in the queue, where count = 1 means a single active/running task and count > 1 means there are pending tasks in addition to the active task. Therefore, in src/components/actionbar/ComfyActionbar.vue, enable the 'Clear Pending Tasks' button only when count > 1 to avoid clearing the currently running task. The active task should be canceled using the 'Cancel current run' button instead. This rule should be enforced via a conditional check on the queue count, with appropriate disabled/aria-disabled states for accessibility, and tests should verify behavior for count = 1 and count > 1.
Applied to files:
src/components/graph/GraphCanvas.vue
📚 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/utils/importSourceUtil.tssrc/composables/useFeatureFlags.tssrc/platform/assets/types/importSource.tssrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/composables/useModelTypes.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/utils/importSourceUtil.tssrc/composables/useFeatureFlags.tssrc/platform/assets/types/importSource.tssrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/composables/useModelTypes.tssrc/platform/assets/composables/useUploadModelWizard.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/remoteConfig/types.tssrc/platform/assets/utils/importSourceUtil.tssrc/composables/useFeatureFlags.tssrc/platform/assets/types/importSource.tssrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/importSources/civitaiImportSource.tssrc/platform/assets/composables/useModelTypes.tssrc/platform/assets/composables/useUploadModelWizard.ts
📚 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:
.i18nrc.cjssrc/platform/assets/importSources/huggingfaceImportSource.tssrc/locales/en/main.json
📚 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:
.i18nrc.cjssrc/platform/assets/composables/useUploadModelWizard.tssrc/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:
.i18nrc.cjssrc/platform/assets/importSources/huggingfaceImportSource.tssrc/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/components/UploadModelUrlInput.vuesrc/locales/en/main.json
📚 Learning: 2025-12-21T06:04:12.548Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-21T06:04:12.548Z
Learning: Applies to **/*.vue : Use `vue-i18n` in composition API for string literals; place new translation entries in `src/locales/en/main.json`
Applied to files:
.i18nrc.cjssrc/platform/assets/composables/useUploadModelWizard.tssrc/platform/assets/components/UploadModelUrlInputCivitai.vuesrc/platform/assets/components/UploadModelUrlInput.vuesrc/locales/en/main.json
📚 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:
.i18nrc.cjssrc/platform/assets/composables/useModelTypes.ts
📚 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-21T06:04:12.548Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-21T06:04:12.548Z
Learning: Applies to **/*.vue : Use Vue 3.5+ with TypeScript in `.vue` files, exclusively using Composition API with `<script setup lang="ts">` syntax
Applied to files:
src/platform/assets/components/UploadModelDialog.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 : 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 : 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.vuesrc/platform/assets/composables/useUploadModelWizard.ts
📚 Learning: 2025-12-21T06:04:12.548Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-21T06:04:12.548Z
Learning: Applies to **/*.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,ts,js} : Use vue-i18n for ALL UI strings
Applied to files:
src/platform/assets/components/UploadModelDialog.vuesrc/platform/assets/composables/useUploadModelWizard.tssrc/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.tssrc/platform/assets/composables/useModelTypes.ts
📚 Learning: 2025-12-21T06:04:12.548Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-21T06:04:12.548Z
Learning: Applies to **/*.{ts,tsx,vue} : Keep functions short and functional; minimize nesting and follow the arrow anti-pattern
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 : Prefer emit/event-name for state changes over other communication patterns
Applied to files:
src/platform/assets/components/UploadModelFooter.vue
📚 Learning: 2025-12-17T00:40:17.361Z
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:17.361Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, prefer pure function declarations (e.g., `function foo() { ... }`) over function expressions (e.g., `const foo = () => { ... }`) for pure functions, as function declarations are considered more functional than function expressions.
Applied to files:
src/platform/assets/components/UploadModelFooter.vue
📚 Learning: 2025-12-21T06:04:12.548Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-21T06:04:12.548Z
Learning: Applies to **/*.vue : Prefer `useModel` over separately defining prop and emit for two-way binding
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-21T06:04:12.548Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-21T06:04:12.548Z
Learning: Applies to **/*.{ts,tsx,vue} : Use function declarations instead of function expressions when possible
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 : Define proper props and emits definitions in Vue components
Applied to files:
src/platform/assets/components/UploadModelFooter.vue
📚 Learning: 2025-12-21T06:04:12.548Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-21T06:04:12.548Z
Learning: Applies to **/*.vue : Implement proper props and emits definitions in Vue components
Applied to files:
src/platform/assets/components/UploadModelFooter.vue
📚 Learning: 2025-12-21T06:04:12.548Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-21T06:04:12.548Z
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-21T06:04:12.548Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-21T06:04:12.548Z
Learning: Applies to **/*.{ts,tsx,vue} : Do not use `any` type or `as any` type assertions; fix the underlying type issue instead
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 : 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-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-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
🧬 Code graph analysis (5)
src/platform/assets/utils/importSourceUtil.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)
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 (5)
src/composables/useFeatureFlags.ts (1)
useFeatureFlags(23-86)src/platform/assets/types/importSource.ts (1)
ImportSource(9-24)src/platform/assets/importSources/civitaiImportSource.ts (1)
civitaiImportSource(6-10)src/platform/assets/importSources/huggingfaceImportSource.ts (1)
huggingfaceImportSource(6-10)src/platform/assets/utils/importSourceUtil.ts (1)
validateSourceUrl(6-15)
⏰ 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). (4)
- GitHub Check: setup
- GitHub Check: lint-and-format
- GitHub Check: test
- GitHub Check: collect
🔇 Additional comments (23)
src/components/graph/GraphCanvas.vue (1)
463-465: LGTM!The dynamic import is correctly formatted and wrapped to comply with the 80-character line width guideline. The lazy-loading pattern in
onMounted()is appropriate for this non-critical initialization.src/platform/remoteConfig/types.ts (1)
41-41: LGTM!The feature flag field follows the existing pattern and integrates cleanly with the RemoteConfig type structure.
src/platform/assets/utils/importSourceUtil.ts (1)
6-15: LGTM!The URL validation logic correctly handles exact hostname matches and subdomain matching with proper error handling for malformed URLs.
src/platform/assets/components/UploadModelDialogHeader.vue (2)
3-7: LGTM!The conditional rendering properly gates the Civitai branding when HuggingFace import is enabled, maintaining clean UI separation between import sources.
24-28: LGTM!The computed title key correctly toggles between provider-specific and generic titles based on the feature flag state.
src/platform/assets/components/UploadModelDialog.vue (1)
6-11: LGTM!The feature-flagged rendering correctly gates the new generic URL input component, enabling HuggingFace support when the flag is enabled.
src/platform/assets/importSources/civitaiImportSource.ts (1)
6-10: LGTM!The Civitai import source configuration is well-defined and follows the ImportSource interface correctly.
src/platform/assets/importSources/huggingfaceImportSource.ts (1)
6-10: LGTM!The HuggingFace import source configuration is correctly structured and follows the same pattern as the Civitai source.
src/platform/assets/types/importSource.ts (1)
9-24: LGTM!The ImportSource interface is well-structured with appropriate readonly modifiers and clear documentation for each property.
.i18nrc.cjs (1)
13-13: LGTM!Adding "Civitai, Hugging Face" to the untranslated special names list ensures these provider brands remain consistent across all locales.
src/composables/useFeatureFlags.ts (2)
16-17: LGTM! Feature flag enum properly configured.The new
HUGGINGFACE_MODEL_IMPORT_ENABLEDenum member follows the existing naming convention and includes the required trailing comma.
67-76: LGTM! Feature flag accessor follows established pattern.The
huggingfaceModelImportEnabledcomputed flag correctly implements the remoteConfig-first fallback pattern consistent with other feature flags in this composable. The default value offalseis appropriate for a gradual rollout.src/platform/assets/components/UploadModelFooter.vue (2)
3-24: LGTM! Feature-flagged UI properly implemented.The conditional rendering of provider-specific help buttons is well-structured. The use of
flags.huggingfaceModelImportEnabledcorrectly gates the new UI, and the i18n keys are appropriately used for all user-facing text.
91-100: LGTM! Dual video help dialogs properly configured.Both
VideoHelpDialoginstances are correctly bound to separate reactive states (showCivitaiHelpandshowHuggingFaceHelp), preventing conflicts. The aria-labels are appropriately localized.src/platform/assets/components/UploadModelUrlInput.vue (3)
59-65: LGTM! Proper i18n template parameter usage.The max file size display correctly uses i18n template parameters with the
<i18n-t>component and a named slot for the size value. This separates content from presentation and allows translators to control the message structure.
70-72: LGTM! Help footer text properly localized.The footer text uses a dedicated i18n key (
uploadModelHelpFooterText) without embedded HTML, following best practices.
12-43: Asset files confirmed to exist.The icon assets at
/assets/images/civitai.svgand/assets/images/hf-logo.svgare present in the public directory and correctly referenced in the component (lines 94, 96). No action needed.src/platform/assets/components/UploadModelUrlInputCivitai.vue (1)
45-45: LGTM! Proper use of defineModel.The component correctly uses
defineModel<string>({ required: true })for two-way binding of the URL, following Vue 3.5+ best practices and the repository's coding guidelines.Based on learnings: The repository prefers
useModelover separately defining prop and emit for two-way binding.src/platform/assets/composables/useUploadModelWizard.ts (4)
48-60: LGTM! Immutable source configuration and detection.The
importSourcesarray is now constructed immutably using a ternary expression, addressing the previous review concern. ThedetectedSourcecomputed property correctly usesvalidateSourceUrlto identify the matching source from the URL.Based on learnings: The code now follows the immutability guideline - "avoid mutable state; prefer immutability and assignment at point of declaration."
91-99: LGTM! Proper source validation with localized error.The URL validation correctly checks against
detectedSourceand provides a helpful localized error message listing all supported sources when validation fails. The use of i18n parameter interpolation ({sources}) follows best practices.
105-120: LGTM! Safe URL decoding with fallback.The URL-decoding logic for
metadata.filenameandmetadata.nameis properly wrapped in try-catch blocks, gracefully preserving the original value if decoding fails. This handles edge cases like malformed percent-encoding without breaking the workflow.
265-265: LGTM! Public API extension documented.The
detectedSourcecomputed property is properly exposed in the return object, extending the public API as documented in the AI summary. This allows consuming components to react to the detected import source.src/locales/en/main.json (1)
2255-2308: LGTM! Well-structured i18n keys with proper parameterization.The new localization keys follow best practices:
- Template parameters (
{size},{sources}) separate content from values- Provider names extracted to dedicated keys (
providerCivitai,providerHuggingFace)- Generic variants alongside provider-specific keys support flexible UI paths
- Consistent naming convention under the
assetBrowsernamespaceThe separation of
maxFileSizeandmaxFileSizeValueallows easy maintenance when size limits change.
| v-else-if="currentStep === 1" | ||
| variant="muted-textonly" | ||
| size="lg" | ||
| class="mr-auto underline" | ||
| data-attr="upload-model-step1-help-link" | ||
| @click="showVideoHelp = true" | ||
| @click="showCivitaiHelp = true" |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider consolidating duplicate help button logic.
The v-else-if block at lines 26-31 now duplicates functionality available in the feature-flagged block above (lines 3-24). When huggingfaceModelImportEnabled is false, users see a single "How do I find this?" button that only shows Civitai help. This creates inconsistent UX between feature-flag states.
Consider whether the v-else-if block should remain after the feature flag is fully rolled out, or if a simpler transition path would improve maintainability.
🤖 Prompt for AI Agents
In src/platform/assets/components/UploadModelFooter.vue around lines 26-31, the
v-else-if help button duplicates logic already implemented in the
feature-flagged block above, creating inconsistent UX when
huggingfaceModelImportEnabled is false; refactor by extracting the help button
into a single shared component or helper method that accepts props (e.g.,
showCivitaiHelp, showHuggingFaceImport, feature flag) and replace both blocks
with that component so the rendering/onclick behavior is centralized and
consistent across flag states, or remove the duplicate v-else-if block if the
feature flag rollout makes the original block obsolete.
| const civitaiIcon = '/assets/images/civitai.svg' | ||
| const civitaiUrl = 'https://civitai.com/models' | ||
| const huggingFaceIcon = '/assets/images/hf-logo.svg' | ||
| const huggingFaceUrl = 'https://huggingface.co' |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider moving provider metadata to a shared constants file.
The provider icon URLs and external links (lines 94-97) are defined as local constants but may be needed in other components. If this data is reused elsewhere (e.g., in UploadModelDialogHeader.vue or help components), extract these to a shared constants file to maintain a single source of truth.
🤖 Prompt for AI Agents
In src/platform/assets/components/UploadModelUrlInput.vue around lines 94-97,
the provider metadata (civitaiIcon, civitaiUrl, huggingFaceIcon, huggingFaceUrl)
is defined locally but should be extracted to a shared constants module; create
a new file (e.g., src/platform/assets/constants/providerLinks.ts or similar),
export a small map/array of provider objects containing icon path and url,
replace the local constants by importing the shared provider data, update any
other components that reference these values (e.g., UploadModelDialogHeader.vue)
to import from the new constants file, and add/update tests/exports as needed to
ensure the single source of truth is used project-wide.
| return response | ||
| .map((folder) => ({ | ||
| name: formatDisplayName(folder.name), | ||
| value: folder.name | ||
| })) | ||
| .sort((a, b) => a.name.localeCompare(b.name)) |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
LGTM! Sorting implementation enhances UX.
The alphabetical sorting of model types by display name improves user experience and aligns with the PR objectives. The use of localeCompare provides locale-aware sorting, and the implementation is clean and efficient.
Optional: Consider explicit locale options for more consistent sorting
For even more consistent sorting behavior across different environments, you could specify explicit locale options:
.sort((a, b) => a.name.localeCompare(b.name))
+ .sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' }))This would handle edge cases like numeric values in names (e.g., "SAM 2" vs "SAM 10") and provide case-insensitive sorting. However, the current implementation is perfectly acceptable.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/platform/assets/composables/useModelTypes.ts around lines 53 to 58, the
sorting uses localeCompare without explicit locale/options; update the sort call
to use an explicit locale (e.g., "en" or navigator.language) and options like {
numeric: true, sensitivity: "base" } to make sorting consistent across
environments and handle numeric/case-insensitive ordering.
09b9ed4 to
9dedf67
Compare
🔧 Auto-fixes AppliedThis PR has been automatically updated to fix linting and formatting issues.
Changes made:
|
luke-mino-altherr
force-pushed
the
feat/huggingface-model-import
branch
from
acc41aa to
93155f6
Compare
- 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 <[email protected]>
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
Change IconTextButton event handlers from :on-click prop binding to @click event listener to align with Vue conventions and match existing usage patterns in the codebase. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Replace hardcoded text-white classes with text-foreground to ensure proper theme color adaptation in UploadModelUrlInput component. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Extract validateSourceUrl to importSourceUtil for better separation of concerns - Add Civitai and Hugging Face to i18n untranslated names - Refactor UploadModelUrlInputCivitai to use defineModel - Add early validation check in uploadModel for better error handling - Remove optional chaining where source is guaranteed to exist 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Remove embedded HTML from i18n strings `maxFileSize` and `uploadModelDescription3`. Use vue-i18n's i18n-t component with named slots to apply font-bold italic classes in the view layer instead of within translation strings. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Add separate help video dialogs for Civitai and Hugging Face when the huggingfaceModelImportEnabled feature flag is enabled. The footer now displays a question mark icon with two clickable provider buttons instead of a single help link. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Replace all v-html usages in UploadModelUrlInputCivitai with i18n-t components using named slots to avoid injecting raw HTML. Localize hardcoded error message in useUploadModelWizard and add defensive check documentation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
luke-mino-altherr
force-pushed
the
feat/huggingface-model-import
branch
from
93155f6 to
b7beb23
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/platform/assets/components/UploadModelFooter.vue (1)
26-31: Feature flag fallback pattern is appropriate.The
v-else-ifblock maintains backward compatibility when the feature flag is disabled, showing the existing "How do I find this?" button. This is a standard pattern for gradual feature rollout and will be simplified once the feature is fully deployed.
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
src/platform/assets/components/UploadModelFooter.vue
🧰 Additional context used
📓 Path-based instructions (9)
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/UploadModelFooter.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/UploadModelFooter.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/UploadModelFooter.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/UploadModelFooter.vue
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/platform/assets/components/UploadModelFooter.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/UploadModelFooter.vue
**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
**/*.vue: Use Vue 3.5+ with TypeScript in.vuefiles, exclusively using Composition API with<script setup lang="ts">syntax
Use Tailwind 4 for styling in Vue components; avoid<style>blocks
Name Vue components using PascalCase (e.g.,MenuHamburger.vue)
Use Vue 3.5 TypeScript-style default prop declaration with reactive props destructuring; do not usewithDefaultsor runtime props declaration
Prefercomputed()overrefwithwatchwhen deriving values
PreferuseModelover separately defining prop and emit for two-way binding
Usevue-i18nin composition API for string literals; place new translation entries insrc/locales/en/main.json
Usecn()utility function from@/utils/tailwindUtilfor merging Tailwind class names; do not use:class="[]"syntax
Do not use thedark:Tailwind variant; use semantic values from thestyle.csstheme instead (e.g.,bg-node-component-surface)
Do not use!importantor the!important prefix for Tailwind classes; find and correct interfering!importantclasses instead
Avoid new usage of PrimeVue components; use VueUse, shadcn/vue, or Reka UI instead
Leverage VueUse functions for performance-enhancing styles in Vue components
Implement proper props and emits definitions in Vue components
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/UploadModelFooter.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Use TypeScript exclusively; do not write new JavaScript code
Use sorted and grouped imports organized by plugin/source
Enforce ESLint rules including Vue + TypeScript rules, disallow floating promises, disallow unused imports, and restrict i18n raw text in templates
Do not useanytype oras anytype assertions; fix the underlying type issue instead
Write code that is expressive and self-documenting; avoid redundant comments and clean as you go
Keep functions short and functional; minimize nesting and follow the arrow anti-pattern
Avoid mutable state; prefer immutability and assignment at point of declaration
Use function declarations instead of function expressions when possible
Use es-toolkit for utility functions
Implement proper error handling in code
Files:
src/platform/assets/components/UploadModelFooter.vue
**/*.{ts,tsx,vue,js,jsx,json,css}
📄 CodeRabbit inference engine (AGENTS.md)
Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, and 80-character line width
Files:
src/platform/assets/components/UploadModelFooter.vue
🧠 Learnings (15)
📚 Learning: 2025-12-21T06:04:12.548Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-21T06:04:12.548Z
Learning: Applies to **/*.{ts,tsx,vue} : Keep functions short and functional; minimize nesting and follow the arrow anti-pattern
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 : Prefer emit/event-name for state changes over other communication patterns
Applied to files:
src/platform/assets/components/UploadModelFooter.vue
📚 Learning: 2025-12-18T21:15:46.862Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7603
File: src/components/queue/QueueOverlayHeader.vue:49-59
Timestamp: 2025-12-18T21:15:46.862Z
Learning: In the ComfyUI_frontend repository, for Vue components, do not add aria-label to buttons that have visible text content (e.g., buttons containing <span> text). The visible text provides the accessible name. Use aria-label only for elements without visible labels (e.g., icon-only buttons). If a button has no visible label, provide a clear aria-label or associate with an aria-labelledby describing its action.
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.vue
📚 Learning: 2025-12-17T00:40:17.361Z
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:17.361Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, prefer pure function declarations (e.g., `function foo() { ... }`) over function expressions (e.g., `const foo = () => { ... }`) for pure functions, as function declarations are considered more functional than function expressions.
Applied to files:
src/platform/assets/components/UploadModelFooter.vue
📚 Learning: 2025-12-21T06:04:12.548Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-21T06:04:12.548Z
Learning: Applies to **/*.vue : Prefer `useModel` over separately defining prop and emit for two-way binding
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-21T06:04:12.548Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-21T06:04:12.548Z
Learning: Applies to **/*.{ts,tsx,vue} : Use function declarations instead of function expressions when possible
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 : Define proper props and emits definitions in Vue components
Applied to files:
src/platform/assets/components/UploadModelFooter.vue
📚 Learning: 2025-12-21T06:04:12.548Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-21T06:04:12.548Z
Learning: Applies to **/*.vue : Implement proper props and emits definitions in Vue components
Applied to files:
src/platform/assets/components/UploadModelFooter.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.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.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/UploadModelFooter.vue
📚 Learning: 2025-12-18T02:07:38.870Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7598
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:131-131
Timestamp: 2025-12-18T02:07:38.870Z
Learning: Tailwind CSS v4 safe utilities (e.g., items-center-safe, justify-*-safe, place-*-safe) are allowed in Vue components under src/ and in story files. Do not flag these specific safe variants as invalid when reviewing code in src/**/*.vue or related stories.
Applied to files:
src/platform/assets/components/UploadModelFooter.vue
📚 Learning: 2025-12-21T01:06:02.786Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7649
File: src/components/graph/selectionToolbox/ColorPickerButton.vue:15-18
Timestamp: 2025-12-21T01:06:02.786Z
Learning: In Comfy-Org/ComfyUI_frontend, in Vue component files, when a filled icon is required (e.g., 'pi pi-circle-fill'), you may mix PrimeIcons with Lucide icons since Lucide lacks filled variants. This mixed usage is acceptable when one icon library does not provide an equivalent filled icon. Apply consistently across Vue components in the src directory where icons are used, and document the rationale when a mixed approach is chosen.
Applied to files:
src/platform/assets/components/UploadModelFooter.vue
⏰ 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). (4)
- GitHub Check: setup
- GitHub Check: test
- GitHub Check: lint-and-format
- GitHub Check: collect
🔇 Additional comments (2)
src/platform/assets/components/UploadModelFooter.vue (2)
3-24: LGTM! Feature-flagged help buttons implemented correctly.The conditional UI block properly guards the new HuggingFace help functionality behind the feature flag. The click handlers use simple ref assignments rather than function expressions, which is efficient. Button components have proper i18n keys and data attributes for testing.
108-114: LGTM! Proper feature flag and state management.The script setup correctly imports and uses the feature flags composable, and the new reactive refs are appropriately scoped for dialog visibility management. Follows Vue 3 Composition API best practices.
| <VideoHelpDialog | ||
| v-model="showVideoHelp" | ||
| v-model="showCivitaiHelp" | ||
| video-url="https://media.comfy.org/compressed_768/civitai_howto.webm" | ||
| :aria-label="$t('assetBrowser.uploadModelHelpVideo')" | ||
| /> | ||
| <VideoHelpDialog | ||
| v-model="showHuggingFaceHelp" | ||
| video-url="https://media.comfy.org/byom/huggingfacehowto.mp4" | ||
| :aria-label="$t('assetBrowser.uploadModelHelpVideo')" | ||
| /> |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider more specific aria-labels for each help dialog.
Both VideoHelpDialog components use the same generic aria-label key. For improved accessibility, consider using provider-specific labels:
assetBrowser.uploadModelHelpVideoCivitaifor line 94assetBrowser.uploadModelHelpVideoHuggingFacefor line 99
🔎 Proposed enhancement
<VideoHelpDialog
v-model="showCivitaiHelp"
video-url="https://media.comfy.org/compressed_768/civitai_howto.webm"
- :aria-label="$t('assetBrowser.uploadModelHelpVideo')"
+ :aria-label="$t('assetBrowser.uploadModelHelpVideoCivitai')"
/>
<VideoHelpDialog
v-model="showHuggingFaceHelp"
video-url="https://media.comfy.org/byom/huggingfacehowto.mp4"
- :aria-label="$t('assetBrowser.uploadModelHelpVideo')"
+ :aria-label="$t('assetBrowser.uploadModelHelpVideoHuggingFace')"
/>Don't forget to add the new i18n keys to src/locales/en/main.json.
🤖 Prompt for AI Agents
In src/platform/assets/components/UploadModelFooter.vue around lines 91 to 100,
the two VideoHelpDialog components currently share the same generic aria-label;
change the first to use $t('assetBrowser.uploadModelHelpVideoCivitai') and the
second to use $t('assetBrowser.uploadModelHelpVideoHuggingFace') so each dialog
has a provider-specific accessible label, and add corresponding keys
"assetBrowser.uploadModelHelpVideoCivitai" and
"assetBrowser.uploadModelHelpVideoHuggingFace" (with appropriate English
strings) to src/locales/en/main.json.
🔧 Auto-fixes AppliedThis PR has been automatically updated to fix linting and formatting issues.
Changes made:
|
|
Adds HuggingFace as a model import source alongside CivitAI, with improved UX for model type selection and UTF-8 filename support. - **Import Sources**: Implemented extensible import source handler pattern supporting both CivitAI and HuggingFace - **UTF-8 Support**: Decode URL-encoded filenames to properly display international characters (e.g., Chinese) - **UX**: Sort model types alphabetically for easier selection - **Feature Flag**: Added `huggingfaceModelImportEnabled` flag for gradual rollout - **i18n**: Use proper template parameters for localized error messages - Created `ImportSourceHandler` interface for extensibility - Refactored existing CivitAI logic into handler pattern - Added URL validation per source - Filename decoding handles malformed URLs gracefully ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7540-feat-Add-HuggingFace-model-import-support-2cb6d73d3650818f966cca89244e8c36) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude <[email protected]> Co-authored-by: GitHub Action <[email protected]>
## Summary Backport of #7540 to cloud/1.35 branch. - Adds HuggingFace as a model import source alongside CivitAI - Implements extensible import source handler pattern - UTF-8 filename decoding for international characters - Alphabetically sorted model types - Feature flag `huggingfaceModelImportEnabled` for gradual rollout ## Conflict Resolution - `src/platform/remoteConfig/types.ts`: Kept both target branch's stripe fields and added PR's huggingface field - `src/platform/assets/components/UploadModelFooter.vue`: Adapted `Button` component to `IconTextButton`/`TextButton` as the new Button component is not available in this branch Original PR: #7540 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7730-backport-cloud-1-35-feat-Add-HuggingFace-model-import-support-2d16d73d36508140a804f8b22883a696) by [Unito](https://www.unito.io) Co-authored-by: Claude <[email protected]> Co-authored-by: GitHub Action <[email protected]>
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