diff --git a/.claude/commands/setup_repo.md b/.claude/commands/setup_repo.md index d82e22ec6..71dee96a5 100644 --- a/.claude/commands/setup_repo.md +++ b/.claude/commands/setup_repo.md @@ -122,7 +122,7 @@ echo " pnpm build - Build for production" echo " pnpm test:unit - Run unit tests" echo " pnpm typecheck - Run TypeScript checks" echo " pnpm lint - Run ESLint" -echo " pnpm format - Format code with Prettier" +echo " pnpm format - Format code with oxfmt" echo "" echo "Next steps:" echo "1. Run 'pnpm dev' to start developing" diff --git a/.cursor/rules/unit-test.mdc b/.cursor/rules/unit-test.mdc deleted file mode 100644 index 2c6704f3e..000000000 --- a/.cursor/rules/unit-test.mdc +++ /dev/null @@ -1,21 +0,0 @@ ---- -description: Creating unit tests -globs: -alwaysApply: false ---- - -# Creating unit tests - -- This project uses `vitest` for unit testing -- Tests are stored in the `test/` directory -- Tests should be cross-platform compatible; able to run on Windows, macOS, and linux - - e.g. the use of `path.resolve`, or `path.join` and `path.sep` to ensure that tests work the same on all platforms -- Tests should be mocked properly - - Mocks should be cleanly written and easy to understand - - Mocks should be re-usable where possible - -## Unit test style - -- Prefer the use of `test.extend` over loose variables - - To achieve this, import `test as baseTest` from `vitest` -- Never use `it`; `test` should be used in place of this \ No newline at end of file diff --git a/.github/AGENTS.md b/.github/AGENTS.md new file mode 100644 index 000000000..0b64ac21b --- /dev/null +++ b/.github/AGENTS.md @@ -0,0 +1,14 @@ +# PR Review Context + +Context for automated PR review system. + +## Review Scope + +This automated review performs comprehensive analysis: +- Architecture and design patterns +- Security vulnerabilities +- Performance implications +- Code quality and maintainability +- Integration concerns + +For implementation details, see `.claude/commands/comprehensive-pr-review.md`. diff --git a/.github/CLAUDE.md b/.github/CLAUDE.md index 9a95d8cd0..3c928db39 100644 --- a/.github/CLAUDE.md +++ b/.github/CLAUDE.md @@ -1,36 +1,3 @@ -# ComfyUI Frontend - Claude Review Context - -This file provides additional context for the automated PR review system. - -## Quick Reference - -### PrimeVue Component Migrations - -When reviewing, flag these deprecated components: -- `Dropdown` → Use `Select` from 'primevue/select' -- `OverlayPanel` → Use `Popover` from 'primevue/popover' -- `Calendar` → Use `DatePicker` from 'primevue/datepicker' -- `InputSwitch` → Use `ToggleSwitch` from 'primevue/toggleswitch' -- `Sidebar` → Use `Drawer` from 'primevue/drawer' -- `Chips` → Use `AutoComplete` with multiple enabled and typeahead disabled -- `TabMenu` → Use `Tabs` without panels -- `Steps` → Use `Stepper` without panels -- `InlineMessage` → Use `Message` component - -### API Utilities Reference - -- `api.apiURL()` - Backend API calls (/prompt, /queue, /view, etc.) -- `api.fileURL()` - Static file access (templates, extensions) -- `$t()` / `i18n.global.t()` - Internationalization -- `DOMPurify.sanitize()` - HTML sanitization - -## Review Scope - -This automated review performs comprehensive analysis including: -- Architecture and design patterns -- Security vulnerabilities -- Performance implications -- Code quality and maintainability -- Integration concerns - -For implementation details, see `.claude/commands/comprehensive-pr-review.md`. \ No newline at end of file + +@AGENTS.md diff --git a/.github/workflows/ci-lint-format.yaml b/.github/workflows/ci-lint-format.yaml index 3ce6d6aa9..c97f6255c 100644 --- a/.github/workflows/ci-lint-format.yaml +++ b/.github/workflows/ci-lint-format.yaml @@ -42,7 +42,7 @@ jobs: - name: Run Stylelint with auto-fix run: pnpm stylelint:fix - - name: Run Prettier with auto-format + - name: Run oxfmt with auto-format run: pnpm format - name: Check for changes @@ -60,7 +60,7 @@ jobs: git config --local user.email "action@github.com" git config --local user.name "GitHub Action" git add . - git commit -m "[automated] Apply ESLint and Prettier fixes" + git commit -m "[automated] Apply ESLint and Oxfmt fixes" git push - name: Final validation @@ -80,7 +80,7 @@ jobs: issue_number: context.issue.number, owner: context.repo.owner, repo: context.repo.repo, - body: '## 🔧 Auto-fixes Applied\n\nThis PR has been automatically updated to fix linting and formatting issues.\n\n**⚠️ Important**: Your local branch is now behind. Run `git pull` before making additional changes to avoid conflicts.\n\n### Changes made:\n- ESLint auto-fixes\n- Prettier formatting' + body: '## 🔧 Auto-fixes Applied\n\nThis PR has been automatically updated to fix linting and formatting issues.\n\n**⚠️ Important**: Your local branch is now behind. Run `git pull` before making additional changes to avoid conflicts.\n\n### Changes made:\n- ESLint auto-fixes\n- Oxfmt formatting' }) - name: Comment on PR about manual fix needed diff --git a/.i18nrc.cjs b/.i18nrc.cjs index 86ce06eaa..4369f0a70 100644 --- a/.i18nrc.cjs +++ b/.i18nrc.cjs @@ -1,7 +1,7 @@ // This file is intentionally kept in CommonJS format (.cjs) // to resolve compatibility issues with dependencies that require CommonJS. // Do not convert this file to ESModule format unless all dependencies support it. -const { defineConfig } = require('@lobehub/i18n-cli'); +const { defineConfig } = require('@lobehub/i18n-cli') module.exports = defineConfig({ modelName: 'gpt-4.1', @@ -10,7 +10,19 @@ module.exports = defineConfig({ entry: 'src/locales/en', entryLocale: 'en', output: 'src/locales', - outputLocales: ['zh', 'zh-TW', 'ru', 'ja', 'ko', 'fr', 'es', 'ar', 'tr', 'pt-BR', 'fa'], + outputLocales: [ + 'zh', + 'zh-TW', + 'ru', + 'ja', + 'ko', + 'fr', + 'es', + 'ar', + 'tr', + 'pt-BR', + 'fa' + ], reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream, Civitai, Hugging Face. 'latent' is the short form of 'latent space'. 'mask' is in the context of image processing. @@ -26,4 +38,4 @@ module.exports = defineConfig({ - Use Arabic-Indic numerals (۰-۹) for numbers where appropriate. - Maintain consistency with terminology used in Persian software and design applications. ` -}); +}) diff --git a/.oxfmtrc.json b/.oxfmtrc.json new file mode 100644 index 000000000..5da4febe2 --- /dev/null +++ b/.oxfmtrc.json @@ -0,0 +1,20 @@ +{ + "$schema": "./node_modules/oxfmt/configuration_schema.json", + "singleQuote": true, + "tabWidth": 2, + "semi": false, + "trailingComma": "none", + "printWidth": 80, + "ignorePatterns": [ + "packages/registry-types/src/comfyRegistryTypes.ts", + "src/types/generatedManagerTypes.ts", + "**/*.md", + "**/*.json", + "**/*.css", + "**/*.yaml", + "**/*.yml", + "**/*.html", + "**/*.svg", + "**/*.xml" + ] +} diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index 4403edd8e..000000000 --- a/.prettierignore +++ /dev/null @@ -1,2 +0,0 @@ -packages/registry-types/src/comfyRegistryTypes.ts -src/types/generatedManagerTypes.ts diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index aa43a43ac..000000000 --- a/.prettierrc +++ /dev/null @@ -1,11 +0,0 @@ -{ - "singleQuote": true, - "tabWidth": 2, - "semi": false, - "trailingComma": "none", - "printWidth": 80, - "importOrder": ["^@core/(.*)$", "", "^@/(.*)$", "^[./]"], - "importOrderSeparation": true, - "importOrderSortSpecifiers": true, - "plugins": ["@prettier/plugin-oxc", "@trivago/prettier-plugin-sort-imports"] -} diff --git a/.storybook/AGENTS.md b/.storybook/AGENTS.md new file mode 100644 index 000000000..5f6373f4b --- /dev/null +++ b/.storybook/AGENTS.md @@ -0,0 +1,17 @@ +# Storybook Guidelines + +See `@docs/guidance/storybook.md` for story patterns (auto-loaded for `*.stories.ts`). + +## Available Context + +Stories have access to: +- All ComfyUI stores +- PrimeVue with ComfyUI theming +- i18n system +- CSS variables and styling + +## Troubleshooting + +1. **Import Errors**: Verify `@/` alias works +2. **Missing Styles**: Check CSS imports in `preview.ts` +3. **Store Errors**: Check store initialization in setup diff --git a/.storybook/CLAUDE.md b/.storybook/CLAUDE.md index ca8248784..320b78815 100644 --- a/.storybook/CLAUDE.md +++ b/.storybook/CLAUDE.md @@ -1,197 +1,3 @@ -# Storybook Development Guidelines for Claude - -## Quick Commands - -- `pnpm storybook`: Start Storybook development server -- `pnpm build-storybook`: Build static Storybook -- `pnpm test:unit`: Run unit tests (includes Storybook components) - -## Development Workflow for Storybook - -1. **Creating New Stories**: - - Place `*.stories.ts` files alongside components - - Follow the naming pattern: `ComponentName.stories.ts` - - Use realistic mock data that matches ComfyUI schemas - -2. **Testing Stories**: - - Verify stories render correctly in Storybook UI - - Test different component states and edge cases - - Ensure proper theming and styling - -3. **Code Quality**: - - Run `pnpm typecheck` to verify TypeScript - - Run `pnpm lint` to check for linting issues - - Follow existing story patterns and conventions - -## Story Creation Guidelines - -### Basic Story Structure - -```typescript -import type { Meta, StoryObj } from '@storybook/vue3' -import ComponentName from './ComponentName.vue' - -const meta: Meta = { - title: 'Category/ComponentName', - component: ComponentName, - parameters: { - layout: 'centered' // or 'fullscreen', 'padded' - } -} - -export default meta -type Story = StoryObj - -export const Default: Story = { - args: { - // Component props - } -} -``` - -### Mock Data Patterns - -For ComfyUI components, use realistic mock data: - -```typescript -// Node definition mock -const mockNodeDef = { - input: { - required: { - prompt: ["STRING", { multiline: true }] - } - }, - output: ["CONDITIONING"], - output_is_list: [false], - category: "conditioning" -} - -// Component instance mock -const mockComponent = { - id: "1", - type: "CLIPTextEncode", - // ... other properties -} -``` - -### Common Story Variants - -Always include these story variants when applicable: - -- **Default**: Basic component with minimal props -- **WithData**: Component with realistic data -- **Loading**: Component in loading state -- **Error**: Component with error state -- **LongContent**: Component with edge case content -- **Empty**: Component with no data - -### Storybook-Specific Code Patterns - -#### Store Access -```typescript -// In stories, access stores through the setup function -export const WithStore: Story = { - render: () => ({ - setup() { - const store = useMyStore() - return { store } - }, - template: '' - }) -} -``` - -#### Event Testing -```typescript -export const WithEvents: Story = { - args: { - onUpdate: fn() // Use Storybook's fn() for action logging - } -} -``` - -## Configuration Notes - -### Vue App Setup -The Storybook preview is configured with: -- Pinia stores initialized -- PrimeVue with ComfyUI theme -- i18n internationalization -- All necessary CSS imports - -### Build Configuration -- Vite integration with proper alias resolution -- Manual chunking for better performance -- TypeScript support with strict checking -- CSS processing for Vue components - -## Troubleshooting - -### Common Issues - -1. **Import Errors**: Verify `@/` alias is working correctly -2. **Missing Styles**: Ensure CSS imports are in `preview.ts` -3. **Store Errors**: Check store initialization in setup -4. **Type Errors**: Use proper TypeScript types for story args - -### Debug Commands - -```bash -# Check TypeScript issues -pnpm typecheck - -# Lint Storybook files -pnpm lint .storybook/ - -# Build to check for production issues -pnpm build-storybook -``` - -## File Organization - -``` -.storybook/ -├── main.ts # Core configuration -├── preview.ts # Global setup and decorators -├── README.md # User documentation -└── CLAUDE.md # This file - Claude guidelines - -src/ -├── components/ -│ └── MyComponent/ -│ ├── MyComponent.vue -│ └── MyComponent.stories.ts -``` - -## Integration with ComfyUI - -### Available Context - -Stories have access to: -- All ComfyUI stores (widgetStore, colorPaletteStore, etc.) -- PrimeVue components with ComfyUI theming -- Internationalization system -- ComfyUI CSS variables and styling - -### Testing Components - -When testing ComfyUI-specific components: -1. Use realistic node definitions and data structures -2. Test with different node types (sampling, conditioning, etc.) -3. Verify proper CSS theming and dark/light modes -4. Check component behavior with various input combinations - -### Performance Considerations - -- Use manual chunking for large dependencies -- Minimize bundle size by avoiding unnecessary imports -- Leverage Storybook's lazy loading capabilities -- Profile build times and optimize as needed - -## Best Practices - -1. **Keep Stories Focused**: Each story should demonstrate one specific use case -2. **Use Descriptive Names**: Story names should clearly indicate what they show -3. **Document Complex Props**: Use JSDoc comments for complex prop types -4. **Test Edge Cases**: Create stories for unusual but valid use cases -5. **Maintain Consistency**: Follow established patterns in existing stories \ No newline at end of file + +@AGENTS.md diff --git a/.storybook/main.ts b/.storybook/main.ts index 5b7c126e9..90fbb138a 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -96,15 +96,15 @@ const config: StorybookConfig = { } ] }, - esbuild: { - // Prevent minification of identifiers to preserve _sfc_main - minifyIdentifiers: false, - keepNames: true - }, build: { - rollupOptions: { - // Disable tree-shaking for Storybook to prevent Vue SFC exports from being removed + rolldownOptions: { + experimental: { + strictExecutionOrder: true + }, treeshake: false, + output: { + keepNames: true + }, onwarn: (warning, warn) => { // Suppress specific warnings if ( diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 54f28d400..9cbac42d7 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,25 +1,22 @@ { "recommendations": [ + "antfu.vite", "austenc.tailwind-docs", "bradlc.vscode-tailwindcss", "davidanson.vscode-markdownlint", "dbaeumer.vscode-eslint", + "donjayamanne.githistory", "eamodio.gitlens", - "esbenp.prettier-vscode", - "figma.figma-vscode-extension", "github.vscode-github-actions", "github.vscode-pull-request-github", "hbenl.vscode-test-explorer", + "kisstkondoros.vscode-codemetrics", "lokalise.i18n-ally", "ms-playwright.playwright", + "oxc.oxc-vscode", + "sonarsource.sonarlint-vscode", "vitest.explorer", "vue.volar", - "sonarsource.sonarlint-vscode", - "deque-systems.vscode-axe-linter", - "kisstkondoros.vscode-codemetrics", - "donjayamanne.githistory", - "wix.vscode-import-cost", - "prograhammer.tslint-vue", - "antfu.vite" + "wix.vscode-import-cost" ] } diff --git a/AGENTS.md b/AGENTS.md index 743572be3..9938865a9 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1,5 +1,7 @@ # Repository Guidelines +See @docs/guidance/*.md for file-type-specific conventions (auto-loaded by glob). + ## Project Structure & Module Organization - Source: `src/` @@ -25,10 +27,10 @@ - Build output: `dist/` - Configs - `vite.config.mts` - - `vitest.config.ts` - `playwright.config.ts` - `eslint.config.ts` - - `.prettierrc` + - `.oxfmtrc.json` + - `.oxlintrc.json` - etc. ## Monorepo Architecture @@ -44,8 +46,23 @@ The project uses **Nx** for build orchestration and task management - `pnpm test:unit`: Run Vitest unit tests - `pnpm test:browser`: Run Playwright E2E tests (`browser_tests/`) - `pnpm lint` / `pnpm lint:fix`: Lint (ESLint) -- `pnpm format` / `pnpm format:check`: Prettier +- `pnpm format` / `pnpm format:check`: oxfmt - `pnpm typecheck`: Vue TSC type checking +- `pnpm storybook`: Start Storybook development server + +## Development Workflow + +1. Make code changes +2. Run relevant tests +3. Run `pnpm typecheck`, `pnpm lint`, `pnpm format` +4. Check if README updates are needed +5. Suggest docs.comfy.org updates for user-facing changes + +## Git Conventions + +- Use `prefix:` format: `feat:`, `fix:`, `test:` +- Add "Fixes #n" to PR descriptions +- Never mention Claude/AI in commits ## Coding Style & Naming Conventions @@ -55,7 +72,7 @@ The project uses **Nx** for build orchestration and task management - Composition API only - Tailwind 4 styling - Avoid ` diff --git a/src/components/sidebar/SidebarIcon.test.ts b/src/components/sidebar/SidebarIcon.test.ts index 7564e7bcd..284a29825 100644 --- a/src/components/sidebar/SidebarIcon.test.ts +++ b/src/components/sidebar/SidebarIcon.test.ts @@ -1,6 +1,5 @@ import { mount } from '@vue/test-utils' import PrimeVue from 'primevue/config' -import OverlayBadge from 'primevue/overlaybadge' import Tooltip from 'primevue/tooltip' import { describe, expect, it } from 'vitest' import { createI18n } from 'vue-i18n' @@ -33,8 +32,7 @@ describe('SidebarIcon', () => { return mount(SidebarIcon, { global: { plugins: [PrimeVue, i18n], - directives: { tooltip: Tooltip }, - components: { OverlayBadge } + directives: { tooltip: Tooltip } }, props: { ...exampleProps, ...props }, ...options @@ -54,9 +52,9 @@ describe('SidebarIcon', () => { it('creates badge when iconBadge prop is set', () => { const badge = '2' const wrapper = mountSidebarIcon({ iconBadge: badge }) - const badgeEl = wrapper.findComponent(OverlayBadge) + const badgeEl = wrapper.find('.sidebar-icon-badge') expect(badgeEl.exists()).toBe(true) - expect(badgeEl.find('.p-badge').text()).toEqual(badge) + expect(badgeEl.text()).toEqual(badge) }) it('shows tooltip on hover', async () => { diff --git a/src/components/sidebar/SidebarIcon.vue b/src/components/sidebar/SidebarIcon.vue index 88900c1a7..10dfca8f8 100644 --- a/src/components/sidebar/SidebarIcon.vue +++ b/src/components/sidebar/SidebarIcon.vue @@ -17,22 +17,28 @@ >
- +
- - - - + + + {{ overlayValue }} + +
{{ t(label) @@ -42,7 +48,6 @@ diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue index fc3cabfcc..325cf44f5 100644 --- a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue +++ b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue @@ -57,7 +57,7 @@ variant="muted-textonly" size="icon-sm" :aria-label="$t('g.learnMore')" - @click.stop="props.openNodeHelp(nodeDef)" + @click.stop="onHelpClick" > @@ -85,6 +85,7 @@ import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue' import NodePreview from '@/components/node/NodePreview.vue' import Button from '@/components/ui/button/Button.vue' import { useSettingStore } from '@/platform/settings/settingStore' +import { useTelemetry } from '@/platform/telemetry' import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore' import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore' import { useSubgraphStore } from '@/stores/subgraphStore' @@ -112,6 +113,13 @@ const sidebarLocation = computed<'left' | 'right'>(() => const toggleBookmark = async () => { await nodeBookmarkStore.toggleBookmark(nodeDef.value) } + +const onHelpClick = () => { + useTelemetry()?.trackUiButtonClicked({ + button_id: 'node_library_help_button' + }) + props.openNodeHelp(nodeDef.value) +} const editBlueprint = async () => { if (!props.node.data) throw new Error( diff --git a/tests-ui/tests/composables/graph/useGraphNodeManager.test.ts b/src/composables/graph/useGraphNodeManager.test.ts similarity index 100% rename from tests-ui/tests/composables/graph/useGraphNodeManager.test.ts rename to src/composables/graph/useGraphNodeManager.test.ts diff --git a/src/composables/graph/useGraphNodeManager.ts b/src/composables/graph/useGraphNodeManager.ts index e71e4cf36..db9173058 100644 --- a/src/composables/graph/useGraphNodeManager.ts +++ b/src/composables/graph/useGraphNodeManager.ts @@ -398,6 +398,9 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager { vueNodeData.set(id, extractVueNodeData(node)) const initializeVueNodeLayout = () => { + // Check if the node was removed mid-sequence + if (!nodeRefs.has(id)) return + // Extract actual positions after configure() has potentially updated them const nodePosition = { x: node.pos[0], y: node.pos[1] } const nodeSize = { width: node.size[0], height: node.size[1] } @@ -427,7 +430,7 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager { } else { // Not during workflow loading - initialize layout immediately // This handles individual node additions during normal operation - initializeVueNodeLayout() + requestAnimationFrame(initializeVueNodeLayout) } // Call original callback if provided diff --git a/src/composables/sidebarTabs/useAssetsSidebarTab.ts b/src/composables/sidebarTabs/useAssetsSidebarTab.ts index ce3753173..cd8e8d0bb 100644 --- a/src/composables/sidebarTabs/useAssetsSidebarTab.ts +++ b/src/composables/sidebarTabs/useAssetsSidebarTab.ts @@ -1,6 +1,7 @@ import { markRaw } from 'vue' import AssetsSidebarTab from '@/components/sidebar/tabs/AssetsSidebarTab.vue' +import { useQueueStore } from '@/stores/queueStore' import type { SidebarTabExtension } from '@/types/extensionTypes' export const useAssetsSidebarTab = (): SidebarTabExtension => { @@ -11,6 +12,12 @@ export const useAssetsSidebarTab = (): SidebarTabExtension => { tooltip: 'sideToolbar.assets', label: 'sideToolbar.labels.assets', component: markRaw(AssetsSidebarTab), - type: 'vue' + type: 'vue', + iconBadge: () => { + const queueStore = useQueueStore() + return queueStore.pendingTasks.length > 0 + ? queueStore.pendingTasks.length.toString() + : null + } } } diff --git a/src/composables/useContextMenuTranslation.ts b/src/composables/useContextMenuTranslation.ts index 7b031d7ee..0c69343f5 100644 --- a/src/composables/useContextMenuTranslation.ts +++ b/src/composables/useContextMenuTranslation.ts @@ -123,8 +123,7 @@ export const useContextMenuTranslation = () => { } // for capture translation text of input and widget - const extraInfo = (options.extra || - options.parentMenu?.options?.extra) as + const extraInfo = (options.extra || options.parentMenu?.options?.extra) as | { inputs?: INodeInputSlot[]; widgets?: IWidget[] } | undefined // widgets and inputs diff --git a/src/composables/useFeatureFlags.ts b/src/composables/useFeatureFlags.ts index 136b7ccd1..ca54bb9c6 100644 --- a/src/composables/useFeatureFlags.ts +++ b/src/composables/useFeatureFlags.ts @@ -1,5 +1,6 @@ import { computed, reactive, readonly } from 'vue' +import { isCloud } from '@/platform/distribution/types' import { remoteConfig } from '@/platform/remoteConfig/remoteConfig' import { api } from '@/scripts/api' @@ -95,6 +96,8 @@ export function useFeatureFlags() { ) }, get teamWorkspacesEnabled() { + if (!isCloud) return false + return ( remoteConfig.value.team_workspaces_enabled ?? api.getServerFeature(ServerFeatureFlag.TEAM_WORKSPACES_ENABLED, false) diff --git a/src/composables/useImageCrop.ts b/src/composables/useImageCrop.ts new file mode 100644 index 000000000..da637ba0a --- /dev/null +++ b/src/composables/useImageCrop.ts @@ -0,0 +1,469 @@ +import { useResizeObserver } from '@vueuse/core' +import type { Ref } from 'vue' +import { computed, onMounted, ref, watch } from 'vue' + +import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode' +import type { Bounds } from '@/renderer/core/layout/types' +import { app } from '@/scripts/app' +import { useNodeOutputStore } from '@/stores/imagePreviewStore' + +type ResizeDirection = + | 'top' + | 'bottom' + | 'left' + | 'right' + | 'nw' + | 'ne' + | 'sw' + | 'se' + +const HANDLE_SIZE = 8 +const CORNER_SIZE = 10 +const MIN_CROP_SIZE = 16 +const CROP_BOX_BORDER = 2 + +interface UseImageCropOptions { + imageEl: Ref + containerEl: Ref + modelValue: Ref +} + +export function useImageCrop(nodeId: NodeId, options: UseImageCropOptions) { + const { imageEl, containerEl, modelValue } = options + const nodeOutputStore = useNodeOutputStore() + + const node = ref(null) + + const imageUrl = ref(null) + const isLoading = ref(false) + + const naturalWidth = ref(0) + const naturalHeight = ref(0) + const displayedWidth = ref(0) + const displayedHeight = ref(0) + const scaleFactor = ref(1) + const imageOffsetX = ref(0) + const imageOffsetY = ref(0) + + const cropX = computed({ + get: () => modelValue.value.x, + set: (v: number) => { + modelValue.value.x = v + } + }) + + const cropY = computed({ + get: () => modelValue.value.y, + set: (v: number) => { + modelValue.value.y = v + } + }) + + const cropWidth = computed({ + get: () => modelValue.value.width || 512, + set: (v: number) => { + modelValue.value.width = v + } + }) + + const cropHeight = computed({ + get: () => modelValue.value.height || 512, + set: (v: number) => { + modelValue.value.height = v + } + }) + + const isDragging = ref(false) + const dragStartX = ref(0) + const dragStartY = ref(0) + const dragStartCropX = ref(0) + const dragStartCropY = ref(0) + + const isResizing = ref(false) + const resizeDirection = ref(null) + const resizeStartX = ref(0) + const resizeStartY = ref(0) + const resizeStartCropX = ref(0) + const resizeStartCropY = ref(0) + const resizeStartCropWidth = ref(0) + const resizeStartCropHeight = ref(0) + + useResizeObserver(containerEl, () => { + if (imageEl.value && imageUrl.value) { + updateDisplayedDimensions() + } + }) + + const getInputImageUrl = (): string | null => { + if (!node.value) return null + + const inputNode = node.value.getInputNode(0) + + if (!inputNode) return null + + const urls = nodeOutputStore.getNodeImageUrls(inputNode) + + if (urls?.length) { + return urls[0] + } + + return null + } + + const updateImageUrl = () => { + imageUrl.value = getInputImageUrl() + } + + const updateDisplayedDimensions = () => { + if (!imageEl.value || !containerEl.value) return + + const img = imageEl.value + const container = containerEl.value + + naturalWidth.value = img.naturalWidth + naturalHeight.value = img.naturalHeight + + if (naturalWidth.value <= 0 || naturalHeight.value <= 0) { + scaleFactor.value = 1 + return + } + + const containerWidth = container.clientWidth + const containerHeight = container.clientHeight + + const imageAspect = naturalWidth.value / naturalHeight.value + const containerAspect = containerWidth / containerHeight + + if (imageAspect > containerAspect) { + displayedWidth.value = containerWidth + displayedHeight.value = containerWidth / imageAspect + imageOffsetX.value = 0 + imageOffsetY.value = (containerHeight - displayedHeight.value) / 2 + } else { + displayedHeight.value = containerHeight + displayedWidth.value = containerHeight * imageAspect + imageOffsetX.value = (containerWidth - displayedWidth.value) / 2 + imageOffsetY.value = 0 + } + + if (naturalWidth.value <= 0 || displayedWidth.value <= 0) { + scaleFactor.value = 1 + } else { + scaleFactor.value = displayedWidth.value / naturalWidth.value + } + } + + const getEffectiveScale = (): number => { + const container = containerEl.value + + if (!container || naturalWidth.value <= 0 || displayedWidth.value <= 0) { + return 1 + } + + const rect = container.getBoundingClientRect() + const clientWidth = container.clientWidth + + if (!clientWidth || !rect.width) return 1 + + const renderedDisplayedWidth = + (displayedWidth.value / clientWidth) * rect.width + + return renderedDisplayedWidth / naturalWidth.value + } + + const cropBoxStyle = computed(() => ({ + left: `${imageOffsetX.value + cropX.value * scaleFactor.value - CROP_BOX_BORDER}px`, + top: `${imageOffsetY.value + cropY.value * scaleFactor.value - CROP_BOX_BORDER}px`, + width: `${cropWidth.value * scaleFactor.value}px`, + height: `${cropHeight.value * scaleFactor.value}px` + })) + + const cropImageStyle = computed(() => { + if (!imageUrl.value) return {} + + return { + backgroundImage: `url(${imageUrl.value})`, + backgroundSize: `${displayedWidth.value}px ${displayedHeight.value}px`, + backgroundPosition: `-${cropX.value * scaleFactor.value}px -${cropY.value * scaleFactor.value}px`, + backgroundRepeat: 'no-repeat' + } + }) + + interface ResizeHandle { + direction: ResizeDirection + class: string + style: { + left: string + top: string + width?: string + height?: string + } + } + + const resizeHandles = computed(() => { + const x = imageOffsetX.value + cropX.value * scaleFactor.value + const y = imageOffsetY.value + cropY.value * scaleFactor.value + const w = cropWidth.value * scaleFactor.value + const h = cropHeight.value * scaleFactor.value + + return [ + { + direction: 'top', + class: 'h-2 cursor-ns-resize', + style: { + left: `${x + HANDLE_SIZE}px`, + top: `${y - HANDLE_SIZE / 2}px`, + width: `${Math.max(0, w - HANDLE_SIZE * 2)}px` + } + }, + { + direction: 'bottom', + class: 'h-2 cursor-ns-resize', + style: { + left: `${x + HANDLE_SIZE}px`, + top: `${y + h - HANDLE_SIZE / 2}px`, + width: `${Math.max(0, w - HANDLE_SIZE * 2)}px` + } + }, + { + direction: 'left', + class: 'w-2 cursor-ew-resize', + style: { + left: `${x - HANDLE_SIZE / 2}px`, + top: `${y + HANDLE_SIZE}px`, + height: `${Math.max(0, h - HANDLE_SIZE * 2)}px` + } + }, + { + direction: 'right', + class: 'w-2 cursor-ew-resize', + style: { + left: `${x + w - HANDLE_SIZE / 2}px`, + top: `${y + HANDLE_SIZE}px`, + height: `${Math.max(0, h - HANDLE_SIZE * 2)}px` + } + }, + { + direction: 'nw', + class: 'cursor-nwse-resize rounded-sm bg-white/80', + style: { + left: `${x - CORNER_SIZE / 2}px`, + top: `${y - CORNER_SIZE / 2}px`, + width: `${CORNER_SIZE}px`, + height: `${CORNER_SIZE}px` + } + }, + { + direction: 'ne', + class: 'cursor-nesw-resize rounded-sm bg-white/80', + style: { + left: `${x + w - CORNER_SIZE / 2}px`, + top: `${y - CORNER_SIZE / 2}px`, + width: `${CORNER_SIZE}px`, + height: `${CORNER_SIZE}px` + } + }, + { + direction: 'sw', + class: 'cursor-nesw-resize rounded-sm bg-white/80', + style: { + left: `${x - CORNER_SIZE / 2}px`, + top: `${y + h - CORNER_SIZE / 2}px`, + width: `${CORNER_SIZE}px`, + height: `${CORNER_SIZE}px` + } + }, + { + direction: 'se', + class: 'cursor-nwse-resize rounded-sm bg-white/80', + style: { + left: `${x + w - CORNER_SIZE / 2}px`, + top: `${y + h - CORNER_SIZE / 2}px`, + width: `${CORNER_SIZE}px`, + height: `${CORNER_SIZE}px` + } + } + ] + }) + + const handleImageLoad = () => { + isLoading.value = false + updateDisplayedDimensions() + } + + const handleImageError = () => { + isLoading.value = false + imageUrl.value = null + } + + const capturePointer = (e: PointerEvent) => + (e.target as HTMLElement).setPointerCapture(e.pointerId) + + const releasePointer = (e: PointerEvent) => + (e.target as HTMLElement).releasePointerCapture(e.pointerId) + + const handleDragStart = (e: PointerEvent) => { + if (!imageUrl.value) return + + isDragging.value = true + dragStartX.value = e.clientX + dragStartY.value = e.clientY + dragStartCropX.value = cropX.value + dragStartCropY.value = cropY.value + capturePointer(e) + } + + const handleDragMove = (e: PointerEvent) => { + if (!isDragging.value) return + + const effectiveScale = getEffectiveScale() + if (effectiveScale === 0) return + + const deltaX = (e.clientX - dragStartX.value) / effectiveScale + const deltaY = (e.clientY - dragStartY.value) / effectiveScale + + const maxX = naturalWidth.value - cropWidth.value + const maxY = naturalHeight.value - cropHeight.value + + cropX.value = Math.round( + Math.max(0, Math.min(maxX, dragStartCropX.value + deltaX)) + ) + cropY.value = Math.round( + Math.max(0, Math.min(maxY, dragStartCropY.value + deltaY)) + ) + } + + const handleDragEnd = (e: PointerEvent) => { + if (!isDragging.value) return + + isDragging.value = false + releasePointer(e) + } + + const handleResizeStart = (e: PointerEvent, direction: ResizeDirection) => { + if (!imageUrl.value) return + + e.stopPropagation() + isResizing.value = true + resizeDirection.value = direction + + resizeStartX.value = e.clientX + resizeStartY.value = e.clientY + resizeStartCropX.value = cropX.value + resizeStartCropY.value = cropY.value + resizeStartCropWidth.value = cropWidth.value + resizeStartCropHeight.value = cropHeight.value + capturePointer(e) + } + + const handleResizeMove = (e: PointerEvent) => { + if (!isResizing.value || !resizeDirection.value) return + + const effectiveScale = getEffectiveScale() + if (effectiveScale === 0) return + + const dir = resizeDirection.value + const deltaX = (e.clientX - resizeStartX.value) / effectiveScale + const deltaY = (e.clientY - resizeStartY.value) / effectiveScale + + const affectsLeft = dir === 'left' || dir === 'nw' || dir === 'sw' + const affectsRight = dir === 'right' || dir === 'ne' || dir === 'se' + const affectsTop = dir === 'top' || dir === 'nw' || dir === 'ne' + const affectsBottom = dir === 'bottom' || dir === 'sw' || dir === 'se' + + let newX = resizeStartCropX.value + let newY = resizeStartCropY.value + let newWidth = resizeStartCropWidth.value + let newHeight = resizeStartCropHeight.value + + if (affectsLeft) { + const maxDeltaX = resizeStartCropWidth.value - MIN_CROP_SIZE + const minDeltaX = -resizeStartCropX.value + const clampedDeltaX = Math.max(minDeltaX, Math.min(maxDeltaX, deltaX)) + newX = resizeStartCropX.value + clampedDeltaX + newWidth = resizeStartCropWidth.value - clampedDeltaX + } else if (affectsRight) { + const maxWidth = naturalWidth.value - resizeStartCropX.value + newWidth = Math.max( + MIN_CROP_SIZE, + Math.min(maxWidth, resizeStartCropWidth.value + deltaX) + ) + } + + if (affectsTop) { + const maxDeltaY = resizeStartCropHeight.value - MIN_CROP_SIZE + const minDeltaY = -resizeStartCropY.value + const clampedDeltaY = Math.max(minDeltaY, Math.min(maxDeltaY, deltaY)) + newY = resizeStartCropY.value + clampedDeltaY + newHeight = resizeStartCropHeight.value - clampedDeltaY + } else if (affectsBottom) { + const maxHeight = naturalHeight.value - resizeStartCropY.value + newHeight = Math.max( + MIN_CROP_SIZE, + Math.min(maxHeight, resizeStartCropHeight.value + deltaY) + ) + } + + if (affectsLeft || affectsRight) { + cropX.value = Math.round(newX) + cropWidth.value = Math.round(newWidth) + } + if (affectsTop || affectsBottom) { + cropY.value = Math.round(newY) + cropHeight.value = Math.round(newHeight) + } + } + + const handleResizeEnd = (e: PointerEvent) => { + if (!isResizing.value) return + + isResizing.value = false + resizeDirection.value = null + releasePointer(e) + } + + const initialize = () => { + if (nodeId != null) { + node.value = app.rootGraph?.getNodeById(nodeId) || null + } + + updateImageUrl() + } + + watch( + () => nodeOutputStore.nodeOutputs, + () => updateImageUrl(), + { deep: true } + ) + + watch( + () => nodeOutputStore.nodePreviewImages, + () => updateImageUrl(), + { deep: true } + ) + + onMounted(initialize) + + return { + imageUrl, + isLoading, + + cropX, + cropY, + cropWidth, + cropHeight, + + cropBoxStyle, + cropImageStyle, + resizeHandles, + + handleImageLoad, + handleImageError, + handleDragStart, + handleDragMove, + handleDragEnd, + handleResizeStart, + handleResizeMove, + handleResizeEnd + } +} diff --git a/src/composables/useLoad3d.ts b/src/composables/useLoad3d.ts index c8312051a..b07daba2e 100644 --- a/src/composables/useLoad3d.ts +++ b/src/composables/useLoad3d.ts @@ -511,6 +511,22 @@ export const useLoad3d = (nodeOrRef: MaybeRef) => { hasSkeleton.value = load3d?.hasSkeleton() ?? false // Reset skeleton visibility when loading new model modelConfig.value.showSkeleton = false + + if (load3d) { + const node = nodeRef.value + + const modelWidget = node?.widgets?.find( + (w) => w.name === 'model_file' || w.name === 'image' + ) + const value = modelWidget?.value + if (typeof value === 'string') { + void Load3dUtils.generateThumbnailIfNeeded( + load3d, + value, + isPreview.value ? 'output' : 'input' + ) + } + } }, skeletonVisibilityChange: (value: boolean) => { modelConfig.value.showSkeleton = value diff --git a/src/composables/useNodeHelpContent.test.ts b/src/composables/useNodeHelpContent.test.ts new file mode 100644 index 000000000..02b3d102f --- /dev/null +++ b/src/composables/useNodeHelpContent.test.ts @@ -0,0 +1,381 @@ +import { flushPromises } from '@vue/test-utils' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' +import { nextTick, ref } from 'vue' + +import { useNodeHelpContent } from '@/composables/useNodeHelpContent' +import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore' + +function createMockNode( + overrides: Partial +): ComfyNodeDefImpl { + return { + name: 'TestNode', + display_name: 'Test Node', + description: 'A test node', + category: 'test', + python_module: 'comfy.test_node', + inputs: {}, + outputs: [], + deprecated: false, + experimental: false, + output_node: false, + api_node: false, + ...overrides + } as ComfyNodeDefImpl +} + +vi.mock('@/scripts/api', () => ({ + api: { + fileURL: vi.fn((url) => url) + } +})) + +vi.mock('vue-i18n', () => ({ + useI18n: () => ({ + locale: ref('en') + }) +})) + +vi.mock('@/types/nodeSource', () => ({ + NodeSourceType: { + Core: 'core', + CustomNodes: 'custom_nodes' + }, + getNodeSource: vi.fn((pythonModule) => { + if (pythonModule?.startsWith('custom_nodes.')) { + return { type: 'custom_nodes' } + } + return { type: 'core' } + }) +})) + +describe('useNodeHelpContent', () => { + const mockCoreNode = createMockNode({ + name: 'TestNode', + display_name: 'Test Node', + description: 'A test node', + python_module: 'comfy.test_node' + }) + + const mockCustomNode = createMockNode({ + name: 'CustomNode', + display_name: 'Custom Node', + description: 'A custom node', + python_module: 'custom_nodes.test_module.custom@1.0.0' + }) + + const mockFetch = vi.fn() + + beforeEach(() => { + mockFetch.mockReset() + vi.stubGlobal('fetch', mockFetch) + }) + + afterEach(() => { + vi.unstubAllGlobals() + }) + + it('should generate correct baseUrl for core nodes', async () => { + const nodeRef = ref(mockCoreNode) + mockFetch.mockResolvedValueOnce({ + ok: true, + text: async () => '# Test' + }) + + const { baseUrl } = useNodeHelpContent(nodeRef) + await nextTick() + + expect(baseUrl.value).toBe(`/docs/${mockCoreNode.name}/`) + }) + + it('should generate correct baseUrl for custom nodes', async () => { + const nodeRef = ref(mockCustomNode) + mockFetch.mockResolvedValueOnce({ + ok: true, + text: async () => '# Test' + }) + + const { baseUrl } = useNodeHelpContent(nodeRef) + await nextTick() + + expect(baseUrl.value).toBe('/extensions/test_module/docs/') + }) + + it('should render markdown content correctly', async () => { + const nodeRef = ref(mockCoreNode) + mockFetch.mockResolvedValueOnce({ + ok: true, + text: async () => '# Test Help\nThis is test help content' + }) + + const { renderedHelpHtml } = useNodeHelpContent(nodeRef) + await flushPromises() + + expect(renderedHelpHtml.value).toContain('This is test help content') + }) + + it('should handle fetch errors and fall back to description', async () => { + const nodeRef = ref(mockCoreNode) + mockFetch.mockResolvedValueOnce({ + ok: false, + statusText: 'Not Found' + }) + + const { error, renderedHelpHtml } = useNodeHelpContent(nodeRef) + await flushPromises() + + expect(error.value).toBe('Not Found') + expect(renderedHelpHtml.value).toContain(mockCoreNode.description) + }) + + it('should include alt attribute for images', async () => { + const nodeRef = ref(mockCustomNode) + mockFetch.mockResolvedValueOnce({ + ok: true, + text: async () => '![image](test.jpg)' + }) + + const { renderedHelpHtml } = useNodeHelpContent(nodeRef) + await flushPromises() + + expect(renderedHelpHtml.value).toContain('alt="image"') + }) + + it('should prefix relative video src in custom nodes', async () => { + const nodeRef = ref(mockCustomNode) + mockFetch.mockResolvedValueOnce({ + ok: true, + text: async () => '' + }) + + const { renderedHelpHtml } = useNodeHelpContent(nodeRef) + await flushPromises() + + expect(renderedHelpHtml.value).toContain( + 'src="/extensions/test_module/docs/video.mp4"' + ) + }) + + it('should prefix relative video src for core nodes with node-specific base URL', async () => { + const nodeRef = ref(mockCoreNode) + mockFetch.mockResolvedValueOnce({ + ok: true, + text: async () => '' + }) + + const { renderedHelpHtml } = useNodeHelpContent(nodeRef) + await flushPromises() + + expect(renderedHelpHtml.value).toContain( + `src="/docs/${mockCoreNode.name}/video.mp4"` + ) + }) + + it('should handle loading state', async () => { + const nodeRef = ref(mockCoreNode) + mockFetch.mockImplementationOnce(() => new Promise(() => {})) // Never resolves + + const { isLoading } = useNodeHelpContent(nodeRef) + await nextTick() + + expect(isLoading.value).toBe(true) + }) + + it('should try fallback URL for custom nodes', async () => { + const nodeRef = ref(mockCustomNode) + mockFetch + .mockResolvedValueOnce({ + ok: false, + statusText: 'Not Found' + }) + .mockResolvedValueOnce({ + ok: true, + text: async () => '# Fallback content' + }) + + useNodeHelpContent(nodeRef) + await flushPromises() + + expect(mockFetch).toHaveBeenCalledTimes(2) + expect(mockFetch).toHaveBeenCalledWith( + '/extensions/test_module/docs/CustomNode/en.md' + ) + expect(mockFetch).toHaveBeenCalledWith( + '/extensions/test_module/docs/CustomNode.md' + ) + }) + + it('should prefix relative source src in custom nodes', async () => { + const nodeRef = ref(mockCustomNode) + mockFetch.mockResolvedValueOnce({ + ok: true, + text: async () => + '' + }) + + const { renderedHelpHtml } = useNodeHelpContent(nodeRef) + await flushPromises() + + expect(renderedHelpHtml.value).toContain( + 'src="/extensions/test_module/docs/video.mp4"' + ) + }) + + it('should prefix relative source src for core nodes with node-specific base URL', async () => { + const nodeRef = ref(mockCoreNode) + mockFetch.mockResolvedValueOnce({ + ok: true, + text: async () => + '' + }) + + const { renderedHelpHtml } = useNodeHelpContent(nodeRef) + await flushPromises() + + expect(renderedHelpHtml.value).toContain( + `src="/docs/${mockCoreNode.name}/video.webm"` + ) + }) + + it('should prefix relative img src in raw HTML for custom nodes', async () => { + const nodeRef = ref(mockCustomNode) + mockFetch.mockResolvedValueOnce({ + ok: true, + text: async () => '# Test\nTest image' + }) + + const { renderedHelpHtml } = useNodeHelpContent(nodeRef) + await flushPromises() + + expect(renderedHelpHtml.value).toContain( + 'src="/extensions/test_module/docs/image.png"' + ) + expect(renderedHelpHtml.value).toContain('alt="Test image"') + }) + + it('should prefix relative img src in raw HTML for core nodes', async () => { + const nodeRef = ref(mockCoreNode) + mockFetch.mockResolvedValueOnce({ + ok: true, + text: async () => '# Test\nTest image' + }) + + const { renderedHelpHtml } = useNodeHelpContent(nodeRef) + await flushPromises() + + expect(renderedHelpHtml.value).toContain( + `src="/docs/${mockCoreNode.name}/image.png"` + ) + expect(renderedHelpHtml.value).toContain('alt="Test image"') + }) + + it('should not prefix absolute img src in raw HTML', async () => { + const nodeRef = ref(mockCustomNode) + mockFetch.mockResolvedValueOnce({ + ok: true, + text: async () => 'Absolute' + }) + + const { renderedHelpHtml } = useNodeHelpContent(nodeRef) + await flushPromises() + + expect(renderedHelpHtml.value).toContain('src="/absolute/image.png"') + expect(renderedHelpHtml.value).toContain('alt="Absolute"') + }) + + it('should not prefix external img src in raw HTML', async () => { + const nodeRef = ref(mockCustomNode) + mockFetch.mockResolvedValueOnce({ + ok: true, + text: async () => + 'External' + }) + + const { renderedHelpHtml } = useNodeHelpContent(nodeRef) + await flushPromises() + + expect(renderedHelpHtml.value).toContain( + 'src="https://example.com/image.png"' + ) + expect(renderedHelpHtml.value).toContain('alt="External"') + }) + + it('should handle various quote styles in media src attributes', async () => { + const nodeRef = ref(mockCoreNode) + mockFetch.mockResolvedValueOnce({ + ok: true, + text: async () => `# Media Test + +Testing quote styles in properly formed HTML: + + + +Double quotes +Single quotes + + + +The MEDIA_SRC_REGEX handles both single and double quotes in img, video and source tags.` + }) + + const { renderedHelpHtml } = useNodeHelpContent(nodeRef) + await flushPromises() + + // All media src attributes should be prefixed correctly + // Note: marked normalizes quotes to double quotes in output + expect(renderedHelpHtml.value).toContain( + `src="/docs/${mockCoreNode.name}/video1.mp4"` + ) + expect(renderedHelpHtml.value).toContain( + `src="/docs/${mockCoreNode.name}/video2.mp4"` + ) + expect(renderedHelpHtml.value).toContain( + `src="/docs/${mockCoreNode.name}/image1.png"` + ) + expect(renderedHelpHtml.value).toContain( + `src="/docs/${mockCoreNode.name}/image2.png"` + ) + expect(renderedHelpHtml.value).toContain( + `src="/docs/${mockCoreNode.name}/video3.mp4"` + ) + expect(renderedHelpHtml.value).toContain( + `src="/docs/${mockCoreNode.name}/video3.webm"` + ) + }) + + it('should ignore stale requests when node changes', async () => { + const nodeRef = ref(mockCoreNode) + let resolveFirst: (value: unknown) => void + const firstRequest = new Promise((resolve) => { + resolveFirst = resolve + }) + + mockFetch + .mockImplementationOnce(() => firstRequest) + .mockResolvedValueOnce({ + ok: true, + text: async () => '# Second node content' + }) + + const { helpContent } = useNodeHelpContent(nodeRef) + await nextTick() + + // Change node before first request completes + nodeRef.value = mockCustomNode + await nextTick() + await flushPromises() + + // Now resolve the first (stale) request + resolveFirst!({ + ok: true, + text: async () => '# First node content' + }) + await flushPromises() + + // Should have second node's content, not first + expect(helpContent.value).toBe('# Second node content') + }) +}) diff --git a/src/composables/useNodeHelpContent.ts b/src/composables/useNodeHelpContent.ts new file mode 100644 index 000000000..81ef9ae47 --- /dev/null +++ b/src/composables/useNodeHelpContent.ts @@ -0,0 +1,79 @@ +import type { MaybeRefOrGetter } from 'vue' +import { computed, ref, toValue, watch } from 'vue' +import { useI18n } from 'vue-i18n' + +import { nodeHelpService } from '@/services/nodeHelpService' +import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore' +import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil' +import { getNodeHelpBaseUrl } from '@/workbench/utils/nodeHelpUtil' + +/** + * Composable for fetching and rendering node help content. + * Creates independent state for each usage, allowing multiple panels + * to show help content without interfering with each other. + * + * @param nodeRef - Reactive reference to the node to show help for + * @returns Reactive help content state and rendered HTML + */ +export function useNodeHelpContent( + nodeRef: MaybeRefOrGetter +) { + const { locale } = useI18n() + + const helpContent = ref('') + const isLoading = ref(false) + const error = ref(null) + + let currentRequest: Promise | null = null + + const baseUrl = computed(() => { + const node = toValue(nodeRef) + if (!node) return '' + return getNodeHelpBaseUrl(node) + }) + + const renderedHelpHtml = computed(() => { + return renderMarkdownToHtml(helpContent.value, baseUrl.value) + }) + + // Watch for node changes and fetch help content + watch( + () => toValue(nodeRef), + async (node) => { + helpContent.value = '' + error.value = null + + if (node) { + isLoading.value = true + const request = (currentRequest = nodeHelpService.fetchNodeHelp( + node, + locale.value || 'en' + )) + + try { + const content = await request + if (currentRequest !== request) return + helpContent.value = content + } catch (e: unknown) { + if (currentRequest !== request) return + error.value = e instanceof Error ? e.message : String(e) + helpContent.value = node.description || '' + } finally { + if (currentRequest === request) { + currentRequest = null + isLoading.value = false + } + } + } + }, + { immediate: true } + ) + + return { + helpContent, + isLoading, + error, + baseUrl, + renderedHelpHtml + } +} diff --git a/src/extensions/core/groupNode.ts b/src/extensions/core/groupNode.ts index a7af7361a..db543c30a 100644 --- a/src/extensions/core/groupNode.ts +++ b/src/extensions/core/groupNode.ts @@ -368,7 +368,7 @@ export class GroupNodeConfig { } getNodeDef( - node: GroupNodeData + node: GroupNodeData | GroupNodeWorkflowData['nodes'][number] ): GroupNodeDef | ComfyNodeDef | null | undefined { if (node.type) { const def = globalDefs[node.type] @@ -386,7 +386,8 @@ export class GroupNodeConfig { let type: string | number | null = linksFrom[0]?.[0]?.[5] ?? null if (type === 'COMBO') { // Use the array items - const source = node.outputs?.[0]?.widget?.name + const output = node.outputs?.[0] as GroupNodeOutput | undefined + const source = output?.widget?.name const nodeIdx = linksFrom[0]?.[0]?.[2] if (source && nodeIdx != null) { const fromTypeName = this.nodeData.nodes[Number(nodeIdx)]?.type diff --git a/src/extensions/core/groupNodeManage.ts b/src/extensions/core/groupNodeManage.ts index 0e91af317..38bddb129 100644 --- a/src/extensions/core/groupNodeManage.ts +++ b/src/extensions/core/groupNodeManage.ts @@ -1,9 +1,11 @@ import { PREFIX, SEPARATOR } from '@/constants/groupNodeConstants' -import { - type LGraphNode, - type LGraphNodeConstructor, - LiteGraph +import type { + GroupNodeConfigEntry, + GroupNodeWorkflowData, + LGraphNode, + LGraphNodeConstructor } from '@/lib/litegraph/src/litegraph' +import { LiteGraph } from '@/lib/litegraph/src/litegraph' import { useToastStore } from '@/platform/updates/common/toastStore' import { type ComfyApp, app } from '../../scripts/app' @@ -15,18 +17,20 @@ import './groupNodeManage.css' const ORDER: symbol = Symbol() -// @ts-expect-error fixme ts strict error -function merge(target, source) { - if (typeof target === 'object' && typeof source === 'object') { - for (const key in source) { - const sv = source[key] - if (typeof sv === 'object') { - let tv = target[key] - if (!tv) tv = target[key] = {} - merge(tv, source[key]) - } else { - target[key] = sv +function merge( + target: Record, + source: Record +): Record { + for (const key in source) { + const sv = source[key] + if (typeof sv === 'object' && sv !== null) { + let tv = target[key] as Record | undefined + if (!tv) { + tv = target[key] = {} } + merge(tv, sv as Record) + } else { + target[key] = sv } } @@ -34,8 +38,7 @@ function merge(target, source) { } export class ManageGroupDialog extends ComfyDialog { - // @ts-expect-error fixme ts strict error - tabs: Record< + tabs!: Record< 'Inputs' | 'Outputs' | 'Widgets', { tab: HTMLAnchorElement; page: HTMLElement } > @@ -52,31 +55,26 @@ export class ManageGroupDialog extends ComfyDialog { > > > = {} - // @ts-expect-error fixme ts strict error - nodeItems: any[] + nodeItems!: HTMLLIElement[] app: ComfyApp - // @ts-expect-error fixme ts strict error - groupNodeType: LGraphNodeConstructor - groupNodeDef: any - groupData: any + groupNodeType!: LGraphNodeConstructor + groupData!: GroupNodeConfig - // @ts-expect-error fixme ts strict error - innerNodesList: HTMLUListElement - // @ts-expect-error fixme ts strict error - widgetsPage: HTMLElement - // @ts-expect-error fixme ts strict error - inputsPage: HTMLElement - // @ts-expect-error fixme ts strict error - outputsPage: HTMLElement - draggable: any + innerNodesList!: HTMLUListElement + widgetsPage!: HTMLElement + inputsPage!: HTMLElement + outputsPage!: HTMLElement + draggable: DraggableList | undefined - get selectedNodeInnerIndex() { - // @ts-expect-error fixme ts strict error - return +this.nodeItems[this.selectedNodeIndex].dataset.nodeindex + get selectedNodeInnerIndex(): number { + const index = this.selectedNodeIndex + if (index == null) throw new Error('No node selected') + const item = this.nodeItems[index] + if (!item?.dataset.nodeindex) throw new Error('Invalid node item') + return +item.dataset.nodeindex } - // @ts-expect-error fixme ts strict error - constructor(app) { + constructor(app: ComfyApp) { super() this.app = app this.element = $el('dialog.comfy-group-manage', { @@ -84,19 +82,15 @@ export class ManageGroupDialog extends ComfyDialog { }) as HTMLDialogElement } - // @ts-expect-error fixme ts strict error - changeTab(tab) { + changeTab(tab: keyof ManageGroupDialog['tabs']): void { this.tabs[this.selectedTab].tab.classList.remove('active') this.tabs[this.selectedTab].page.classList.remove('active') - // @ts-expect-error fixme ts strict error this.tabs[tab].tab.classList.add('active') - // @ts-expect-error fixme ts strict error this.tabs[tab].page.classList.add('active') this.selectedTab = tab } - // @ts-expect-error fixme ts strict error - changeNode(index, force?) { + changeNode(index: number, force?: boolean): void { if (!force && this.selectedNodeIndex === index) return if (this.selectedNodeIndex != null) { @@ -122,43 +116,41 @@ export class ManageGroupDialog extends ComfyDialog { this.groupNodeType = LiteGraph.registered_node_types[ `${PREFIX}${SEPARATOR}` + this.selectedGroup ] as unknown as LGraphNodeConstructor - this.groupNodeDef = this.groupNodeType.nodeData - this.groupData = GroupNodeHandler.getGroupData(this.groupNodeType) + this.groupData = GroupNodeHandler.getGroupData(this.groupNodeType)! } - // @ts-expect-error fixme ts strict error - changeGroup(group, reset = true) { + changeGroup(group: string, reset = true): void { this.selectedGroup = group this.getGroupData() const nodes = this.groupData.nodeData.nodes - // @ts-expect-error fixme ts strict error - this.nodeItems = nodes.map((n, i) => - $el( - 'li.draggable-item', - { - dataset: { - nodeindex: n.index + '' - }, - onclick: () => { - this.changeNode(i) - } - }, - [ - $el('span.drag-handle'), - $el( - 'div', - { - textContent: n.title ?? n.type + this.nodeItems = nodes.map( + (n, i) => + $el( + 'li.draggable-item', + { + dataset: { + nodeindex: n.index + '' }, - n.title - ? $el('span', { - textContent: n.type - }) - : [] - ) - ] - ) + onclick: () => { + this.changeNode(i) + } + }, + [ + $el('span.drag-handle'), + $el( + 'div', + { + textContent: n.title ?? n.type + }, + n.title + ? $el('span', { + textContent: n.type + }) + : [] + ) + ] + ) as HTMLLIElement ) this.innerNodesList.replaceChildren(...this.nodeItems) @@ -167,47 +159,46 @@ export class ManageGroupDialog extends ComfyDialog { this.selectedNodeIndex = null this.changeNode(0) } else { - const items = this.draggable.getAllItems() - // @ts-expect-error fixme ts strict error - let index = items.findIndex((item) => item.classList.contains('selected')) - if (index === -1) index = this.selectedNodeIndex + const items = this.draggable!.getAllItems() + let index = items.findIndex((item: Element) => + item.classList.contains('selected') + ) + if (index === -1) index = this.selectedNodeIndex! this.changeNode(index, true) } const ordered = [...nodes] this.draggable?.dispose() this.draggable = new DraggableList(this.innerNodesList, 'li') - this.draggable.addEventListener( - 'dragend', - // @ts-expect-error fixme ts strict error - ({ detail: { oldPosition, newPosition } }) => { - if (oldPosition === newPosition) return - ordered.splice(newPosition, 0, ordered.splice(oldPosition, 1)[0]) - for (let i = 0; i < ordered.length; i++) { - this.storeModification({ - nodeIndex: ordered[i].index, - section: ORDER, - prop: 'order', - value: i - }) - } + this.draggable.addEventListener('dragend', (e: Event) => { + const { oldPosition, newPosition } = (e as CustomEvent).detail + if (oldPosition === newPosition) return + ordered.splice(newPosition, 0, ordered.splice(oldPosition, 1)[0]) + for (let i = 0; i < ordered.length; i++) { + this.storeModification({ + nodeIndex: ordered[i].index, + section: ORDER, + prop: 'order', + value: i + }) } - ) + }) } storeModification(props: { nodeIndex?: number - section: symbol + section: string | symbol prop: string - value: any + value: unknown }) { const { nodeIndex, section, prop, value } = props - // @ts-expect-error fixme ts strict error - const groupMod = (this.modifications[this.selectedGroup] ??= {}) - const nodesMod = (groupMod.nodes ??= {}) + const groupKey = this.selectedGroup! + const groupMod = (this.modifications[groupKey] ??= {}) + const nodesMod = ((groupMod as Record).nodes ??= + {}) as Record>> const nodeMod = (nodesMod[nodeIndex ?? this.selectedNodeInnerIndex] ??= {}) const typeMod = (nodeMod[section] ??= {}) - if (typeof value === 'object') { + if (typeof value === 'object' && value !== null) { const objMod = (typeMod[prop] ??= {}) Object.assign(objMod, value) } else { @@ -215,35 +206,45 @@ export class ManageGroupDialog extends ComfyDialog { } } - // @ts-expect-error fixme ts strict error - getEditElement(section, prop, value, placeholder, checked, checkable = true) { - if (value === placeholder) value = '' + getEditElement( + section: string, + prop: string | number, + value: unknown, + placeholder: string, + checked: boolean, + checkable = true + ): HTMLDivElement { + let displayValue = value === placeholder ? '' : value - const mods = - // @ts-expect-error fixme ts strict error - this.modifications[this.selectedGroup]?.nodes?.[ - this.selectedNodeInnerIndex - ]?.[section]?.[prop] - if (mods) { - if (mods.name != null) { - value = mods.name + const groupKey = this.selectedGroup! + const mods = ( + this.modifications[groupKey] as Record | undefined + )?.nodes as + | Record< + number, + Record> + > + | undefined + const modEntry = mods?.[this.selectedNodeInnerIndex]?.[section]?.[prop] + if (modEntry) { + if (modEntry.name != null) { + displayValue = modEntry.name } - if (mods.visible != null) { - checked = mods.visible + if (modEntry.visible != null) { + checked = modEntry.visible } } return $el('div', [ $el('input', { - value, + value: displayValue as string, placeholder, type: 'text', - // @ts-expect-error fixme ts strict error - onchange: (e) => { + onchange: (e: Event) => { this.storeModification({ section, - prop, - value: { name: e.target.value } + prop: String(prop), + value: { name: (e.target as HTMLInputElement).value } }) } }), @@ -252,25 +253,23 @@ export class ManageGroupDialog extends ComfyDialog { type: 'checkbox', checked, disabled: !checkable, - // @ts-expect-error fixme ts strict error - onchange: (e) => { + onchange: (e: Event) => { this.storeModification({ section, - prop, - value: { visible: !!e.target.checked } + prop: String(prop), + value: { visible: !!(e.target as HTMLInputElement).checked } }) } }) ]) - ]) + ]) as HTMLDivElement } buildWidgetsPage() { const widgets = this.groupData.oldToNewWidgetMap[this.selectedNodeInnerIndex] const items = Object.keys(widgets ?? {}) - // @ts-expect-error fixme ts strict error - const type = app.rootGraph.extra.groupNodes[this.selectedGroup] + const type = app.rootGraph.extra.groupNodes![this.selectedGroup!]! const config = type.config?.[this.selectedNodeInnerIndex]?.input this.widgetsPage.replaceChildren( ...items.map((oldName) => { @@ -289,28 +288,25 @@ export class ManageGroupDialog extends ComfyDialog { buildInputsPage() { const inputs = this.groupData.nodeInputs[this.selectedNodeInnerIndex] const items = Object.keys(inputs ?? {}) - // @ts-expect-error fixme ts strict error - const type = app.rootGraph.extra.groupNodes[this.selectedGroup] + const type = app.rootGraph.extra.groupNodes![this.selectedGroup!]! const config = type.config?.[this.selectedNodeInnerIndex]?.input - this.inputsPage.replaceChildren( - // @ts-expect-error fixme ts strict error - ...items - .map((oldName) => { - let value = inputs[oldName] - if (!value) { - return - } + const elements = items + .map((oldName) => { + const value = inputs[oldName] + if (!value) { + return null + } - return this.getEditElement( - 'input', - oldName, - value, - oldName, - config?.[oldName]?.visible !== false - ) - }) - .filter(Boolean) - ) + return this.getEditElement( + 'input', + oldName, + value, + oldName, + config?.[oldName]?.visible !== false + ) + }) + .filter((el): el is HTMLDivElement => el !== null) + this.inputsPage.replaceChildren(...elements) return !!items.length } @@ -323,38 +319,35 @@ export class ManageGroupDialog extends ComfyDialog { const groupOutputs = this.groupData.oldToNewOutputMap[this.selectedNodeInnerIndex] - // @ts-expect-error fixme ts strict error - const type = app.rootGraph.extra.groupNodes[this.selectedGroup] + const type = app.rootGraph.extra.groupNodes![this.selectedGroup!]! const config = type.config?.[this.selectedNodeInnerIndex]?.output const node = this.groupData.nodeData.nodes[this.selectedNodeInnerIndex] const checkable = node.type !== 'PrimitiveNode' - this.outputsPage.replaceChildren( - ...outputs - // @ts-expect-error fixme ts strict error - .map((type, slot) => { - const groupOutputIndex = groupOutputs?.[slot] - const oldName = innerNodeDef.output_name?.[slot] ?? type - let value = config?.[slot]?.name - const visible = config?.[slot]?.visible || groupOutputIndex != null - if (!value || value === oldName) { - value = '' - } - return this.getEditElement( - 'output', - slot, - value, - oldName, - visible, - checkable - ) - }) - .filter(Boolean) - ) + const elements = outputs.map((outputType: unknown, slot: number) => { + const groupOutputIndex = groupOutputs?.[slot] + const oldName = innerNodeDef?.output_name?.[slot] ?? String(outputType) + let value = config?.[slot]?.name + const visible = config?.[slot]?.visible || groupOutputIndex != null + if (!value || value === oldName) { + value = '' + } + return this.getEditElement( + 'output', + slot, + value, + oldName, + visible, + checkable + ) + }) + this.outputsPage.replaceChildren(...elements) return !!outputs.length } - // @ts-expect-error fixme ts strict error - show(type?) { + override show(groupNodeType?: string | HTMLElement | HTMLElement[]): void { + // Extract string type - this method repurposes the show signature + const nodeType = + typeof groupNodeType === 'string' ? groupNodeType : undefined const groupNodes = Object.keys(app.rootGraph.extra?.groupNodes ?? {}).sort( (a, b) => a.localeCompare(b) ) @@ -371,24 +364,27 @@ export class ManageGroupDialog extends ComfyDialog { this.outputsPage ]) - this.tabs = [ + type TabName = 'Inputs' | 'Widgets' | 'Outputs' + const tabEntries: [TabName, HTMLElement][] = [ ['Inputs', this.inputsPage], ['Widgets', this.widgetsPage], ['Outputs', this.outputsPage] - // @ts-expect-error fixme ts strict error - ].reduce((p, [name, page]: [string, HTMLElement]) => { - // @ts-expect-error fixme ts strict error - p[name] = { - tab: $el('a', { - onclick: () => { - this.changeTab(name) - }, - textContent: name - }), - page - } - return p - }, {}) as any + ] + this.tabs = tabEntries.reduce( + (p, [name, page]) => { + p[name] = { + tab: $el('a', { + onclick: () => { + this.changeTab(name) + }, + textContent: name + }) as HTMLAnchorElement, + page + } + return p + }, + {} as ManageGroupDialog['tabs'] + ) const outer = $el('div.comfy-group-manage-outer', [ $el('header', [ @@ -396,15 +392,14 @@ export class ManageGroupDialog extends ComfyDialog { $el( 'select', { - // @ts-expect-error fixme ts strict error - onchange: (e) => { - this.changeGroup(e.target.value) + onchange: (e: Event) => { + this.changeGroup((e.target as HTMLSelectElement).value) } }, groupNodes.map((g) => $el('option', { textContent: g, - selected: `${PREFIX}${SEPARATOR}${g}` === type, + selected: `${PREFIX}${SEPARATOR}${g}` === nodeType, value: g }) ) @@ -439,8 +434,7 @@ export class ManageGroupDialog extends ComfyDialog { `Are you sure you want to remove the node: "${this.selectedGroup}"` ) ) { - // @ts-expect-error fixme ts strict error - delete app.rootGraph.extra.groupNodes[this.selectedGroup] + delete app.rootGraph.extra.groupNodes![this.selectedGroup!] LiteGraph.unregisterNodeType( `${PREFIX}${SEPARATOR}` + this.selectedGroup ) @@ -454,97 +448,106 @@ export class ManageGroupDialog extends ComfyDialog { 'button.comfy-btn', { onclick: async () => { - let nodesByType - let recreateNodes = [] - const types = {} + type NodesByType = Record + let nodesByType: NodesByType | undefined + const recreateNodes: LGraphNode[] = [] + const types: Record = {} for (const g in this.modifications) { - // @ts-expect-error fixme ts strict error - const type = app.rootGraph.extra.groupNodes[g] - let config = (type.config ??= {}) + const groupNodeData = app.rootGraph.extra.groupNodes![g]! + let config = (groupNodeData.config ??= {}) - let nodeMods = this.modifications[g]?.nodes + type NodeMods = Record< + string, + Record> + > + let nodeMods = this.modifications[g]?.nodes as + | NodeMods + | undefined if (nodeMods) { const keys = Object.keys(nodeMods) - // @ts-expect-error fixme ts strict error - if (nodeMods[keys[0]][ORDER]) { + if (nodeMods[keys[0]]?.[ORDER]) { // If any node is reordered, they will all need sequencing - const orderedNodes = [] - const orderedMods = {} - const orderedConfig = {} + const orderedNodes: GroupNodeWorkflowData['nodes'] = [] + const orderedMods: NodeMods = {} + const orderedConfig: Record = + {} for (const n of keys) { - // @ts-expect-error fixme ts strict error - const order = nodeMods[n][ORDER].order - orderedNodes[order] = type.nodes[+n] - // @ts-expect-error fixme ts strict error + const order = (nodeMods[n][ORDER] as { order: number }) + .order + orderedNodes[order] = groupNodeData.nodes[+n] orderedMods[order] = nodeMods[n] orderedNodes[order].index = order } // Rewrite links - for (const l of type.links) { - // @ts-expect-error l[0]/l[2] used as node index - if (l[0] != null) l[0] = type.nodes[l[0]].index - // @ts-expect-error l[0]/l[2] used as node index - if (l[2] != null) l[2] = type.nodes[l[2]].index + const nodesLen = groupNodeData.nodes.length + for (const l of groupNodeData.links) { + const srcIdx = l[0] as number + const dstIdx = l[2] as number + if (srcIdx != null && srcIdx < nodesLen) + l[0] = groupNodeData.nodes[srcIdx].index! + if (dstIdx != null && dstIdx < nodesLen) + l[2] = groupNodeData.nodes[dstIdx].index! } // Rewrite externals - if (type.external) { - for (const ext of type.external) { - if (ext[0] != null) { - // @ts-expect-error ext[0] used as node index - ext[0] = type.nodes[ext[0]].index + if (groupNodeData.external) { + for (const ext of groupNodeData.external) { + const extIdx = ext[0] as number + if (extIdx != null && extIdx < nodesLen) { + ext[0] = groupNodeData.nodes[extIdx].index! } } } // Rewrite modifications for (const id of keys) { - // @ts-expect-error id used as node index - if (config[id]) { - // @ts-expect-error fixme ts strict error - orderedConfig[type.nodes[id].index] = config[id] + if (config[+id]) { + orderedConfig[groupNodeData.nodes[+id].index!] = + config[+id] } - // @ts-expect-error id used as config key - delete config[id] + delete config[+id] } - type.nodes = orderedNodes + groupNodeData.nodes = orderedNodes nodeMods = orderedMods - type.config = config = orderedConfig + groupNodeData.config = config = orderedConfig } - merge(config, nodeMods) + merge( + config as Record, + nodeMods as Record + ) } - // @ts-expect-error fixme ts strict error - types[g] = type + types[g] = groupNodeData if (!nodesByType) { - nodesByType = app.rootGraph.nodes.reduce((p, n) => { - // @ts-expect-error fixme ts strict error - p[n.type] ??= [] - // @ts-expect-error fixme ts strict error - p[n.type].push(n) - return p - }, {}) + nodesByType = app.rootGraph.nodes.reduce( + (p, n) => { + const nodeType = n.type ?? '' + p[nodeType] ??= [] + p[nodeType].push(n) + return p + }, + {} + ) } - // @ts-expect-error fixme ts strict error - const nodes = nodesByType[`${PREFIX}${SEPARATOR}` + g] - if (nodes) recreateNodes.push(...nodes) + const groupTypeNodes = nodesByType[`${PREFIX}${SEPARATOR}` + g] + if (groupTypeNodes) recreateNodes.push(...groupTypeNodes) } await GroupNodeConfig.registerFromWorkflow(types, []) for (const node of recreateNodes) { - node.recreate() + node.recreate?.() } this.modifications = {} this.app.canvas.setDirty(true, true) - this.changeGroup(this.selectedGroup, false) + this.changeGroup(this.selectedGroup!, false) } }, 'Save' @@ -559,8 +562,8 @@ export class ManageGroupDialog extends ComfyDialog { this.element.replaceChildren(outer) this.changeGroup( - type - ? (groupNodes.find((g) => `${PREFIX}${SEPARATOR}${g}` === type) ?? + nodeType + ? (groupNodes.find((g) => `${PREFIX}${SEPARATOR}${g}` === nodeType) ?? groupNodes[0]) : groupNodes[0] ) diff --git a/src/extensions/core/imageCrop.ts b/src/extensions/core/imageCrop.ts new file mode 100644 index 000000000..38cf6692a --- /dev/null +++ b/src/extensions/core/imageCrop.ts @@ -0,0 +1,12 @@ +import { useExtensionService } from '@/services/extensionService' + +useExtensionService().registerExtension({ + name: 'Comfy.ImageCrop', + + async nodeCreated(node) { + if (node.constructor.comfyClass !== 'ImageCrop') return + + const [oldWidth, oldHeight] = node.size + node.setSize([Math.max(oldWidth, 300), Math.max(oldHeight, 450)]) + } +}) diff --git a/src/extensions/core/index.ts b/src/extensions/core/index.ts index ba36f847a..f50493d82 100644 --- a/src/extensions/core/index.ts +++ b/src/extensions/core/index.ts @@ -10,6 +10,7 @@ import './groupNode' import './groupNodeManage' import './groupOptions' import './imageCompare' +import './imageCrop' import './load3d' import './maskeditor' import './nodeTemplates' diff --git a/src/extensions/core/load3d/Load3d.ts b/src/extensions/core/load3d/Load3d.ts index 657a1796b..60690e4f8 100644 --- a/src/extensions/core/load3d/Load3d.ts +++ b/src/extensions/core/load3d/Load3d.ts @@ -754,6 +754,60 @@ class Load3d { this.forceRender() } + public async captureThumbnail( + width: number = 256, + height: number = 256 + ): Promise { + if (!this.modelManager.currentModel) { + throw new Error('No model loaded for thumbnail capture') + } + + const savedState = this.cameraManager.getCameraState() + const savedCameraType = this.cameraManager.getCurrentCameraType() + const savedGridVisible = this.sceneManager.gridHelper.visible + + try { + this.sceneManager.gridHelper.visible = false + + if (savedCameraType !== 'perspective') { + this.cameraManager.toggleCamera('perspective') + } + + const box = new THREE.Box3().setFromObject(this.modelManager.currentModel) + const size = box.getSize(new THREE.Vector3()) + const center = box.getCenter(new THREE.Vector3()) + + const maxDim = Math.max(size.x, size.y, size.z) + const distance = maxDim * 1.5 + + const cameraPosition = new THREE.Vector3( + center.x - distance * 0.8, + center.y + distance * 0.4, + center.z + distance * 0.3 + ) + + this.cameraManager.perspectiveCamera.position.copy(cameraPosition) + this.cameraManager.perspectiveCamera.lookAt(center) + this.cameraManager.perspectiveCamera.updateProjectionMatrix() + + if (this.controlsManager.controls) { + this.controlsManager.controls.target.copy(center) + this.controlsManager.controls.update() + } + + const result = await this.sceneManager.captureScene(width, height) + return result.scene + } finally { + this.sceneManager.gridHelper.visible = savedGridVisible + + if (savedCameraType !== 'perspective') { + this.cameraManager.toggleCamera(savedCameraType) + } + this.cameraManager.setCameraState(savedState) + this.controlsManager.controls?.update() + } + } + public remove(): void { if (this.contextMenuAbortController) { this.contextMenuAbortController.abort() diff --git a/src/extensions/core/load3d/Load3dUtils.ts b/src/extensions/core/load3d/Load3dUtils.ts index 13095ac96..ba7c36e55 100644 --- a/src/extensions/core/load3d/Load3dUtils.ts +++ b/src/extensions/core/load3d/Load3dUtils.ts @@ -1,9 +1,34 @@ +import type Load3d from '@/extensions/core/load3d/Load3d' import { t } from '@/i18n' import { useToastStore } from '@/platform/updates/common/toastStore' import { api } from '@/scripts/api' import { app } from '@/scripts/app' class Load3dUtils { + static async generateThumbnailIfNeeded( + load3d: Load3d, + modelPath: string, + folderType: 'input' | 'output' + ): Promise { + const [subfolder, filename] = this.splitFilePath(modelPath) + const thumbnailFilename = this.getThumbnailFilename(filename) + + const exists = await this.fileExists( + subfolder, + thumbnailFilename, + folderType + ) + if (exists) return + + const imageData = await load3d.captureThumbnail(256, 256) + await this.uploadThumbnail( + imageData, + subfolder, + thumbnailFilename, + folderType + ) + } + static async uploadTempImage( imageData: string, prefix: string, @@ -122,6 +147,46 @@ class Load3dUtils { await Promise.all(uploadPromises) } + + static getThumbnailFilename(modelFilename: string): string { + return `${modelFilename}.png` + } + + static async fileExists( + subfolder: string, + filename: string, + type: string = 'input' + ): Promise { + try { + const url = api.apiURL(this.getResourceURL(subfolder, filename, type)) + const response = await fetch(url, { method: 'HEAD' }) + return response.ok + } catch { + return false + } + } + + static async uploadThumbnail( + imageData: string, + subfolder: string, + filename: string, + type: string = 'input' + ): Promise { + const blob = await fetch(imageData).then((r) => r.blob()) + const file = new File([blob], filename, { type: 'image/png' }) + + const body = new FormData() + body.append('image', file) + body.append('subfolder', subfolder) + body.append('type', type) + + const resp = await api.fetchApi('/upload/image', { + method: 'POST', + body + }) + + return resp.status === 200 + } } export default Load3dUtils diff --git a/src/extensions/core/previewAny.ts b/src/extensions/core/previewAny.ts index d9d093702..d06ba1584 100644 --- a/src/extensions/core/previewAny.ts +++ b/src/extensions/core/previewAny.ts @@ -75,7 +75,9 @@ useExtensionService().registerExtension({ for (const previewWidget of previewWidgets) { const text = message.text ?? '' - previewWidget.value = Array.isArray(text) ? (text[0] ?? '') : text + previewWidget.value = Array.isArray(text) + ? (text?.join('\n\n') ?? '') + : text } } } diff --git a/src/extensions/core/saveMesh.ts b/src/extensions/core/saveMesh.ts index ae94a8609..947120467 100644 --- a/src/extensions/core/saveMesh.ts +++ b/src/extensions/core/saveMesh.ts @@ -4,6 +4,7 @@ import Load3D from '@/components/load3d/Load3D.vue' import { useLoad3d } from '@/composables/useLoad3d' import { createExportMenuItems } from '@/extensions/core/load3d/exportMenuHelper' import Load3DConfiguration from '@/extensions/core/load3d/Load3DConfiguration' +import Load3dUtils from '@/extensions/core/load3d/Load3dUtils' import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode' import type { IContextMenuValue } from '@/lib/litegraph/src/interfaces' import type { NodeOutputWith, ResultItem } from '@/schemas/apiSchema' @@ -94,6 +95,17 @@ useExtensionService().registerExtension({ const config = new Load3DConfiguration(load3d, node.properties) const loadFolder = fileInfo.type as 'input' | 'output' + + const onModelLoaded = () => { + load3d.removeEventListener('modelLoadingEnd', onModelLoaded) + void Load3dUtils.generateThumbnailIfNeeded( + load3d, + filePath, + loadFolder + ) + } + load3d.addEventListener('modelLoadingEnd', onModelLoaded) + config.configureForSaveMesh(loadFolder, filePath) } }) diff --git a/src/lib/litegraph/AGENTS.md b/src/lib/litegraph/AGENTS.md new file mode 100644 index 000000000..8480cc00a --- /dev/null +++ b/src/lib/litegraph/AGENTS.md @@ -0,0 +1,41 @@ +# Litegraph Guidelines + +## Code Philosophy + +- Write concise, legible, and easily maintainable code +- Avoid repetition where possible, but not at expense of legibility +- Prefer running single tests, not the whole suite, for performance + +## Code Style + +- Prefer single line `if` syntax for concise expressions +- Take advantage of `TypedArray` `subarray` when appropriate +- The `size` and `pos` properties of `Rectangle` share the same array buffer +- Prefer returning `undefined` over `null` +- Type assertions are a last resort (acceptable for legacy code interop) + +## Circular Dependencies in Tests + +**CRITICAL**: Always import from the barrel export for subgraph code: + +```typescript +// ✅ Correct - barrel import +import { LGraph, Subgraph, SubgraphNode } from "@/lib/litegraph/src/litegraph" + +// ❌ Wrong - causes circular dependency +import { LGraph } from "@/lib/litegraph/src/LGraph" +``` + +**Root cause**: `LGraph` ↔ `Subgraph` circular dependency (Subgraph extends LGraph, LGraph creates Subgraph instances). + +## Test Helpers + +```typescript +import { createTestSubgraph, createTestSubgraphNode } from "./fixtures/subgraphHelpers" + +function createTestSetup() { + const subgraph = createTestSubgraph() + const subgraphNode = createTestSubgraphNode(subgraph) + return { subgraph, subgraphNode } +} +``` diff --git a/src/lib/litegraph/CLAUDE.md b/src/lib/litegraph/CLAUDE.md index 68f8bea95..631093341 100644 --- a/src/lib/litegraph/CLAUDE.md +++ b/src/lib/litegraph/CLAUDE.md @@ -1,62 +1,3 @@ -- This codebase has extensive eslint autofix rules and IDEs are configured to use eslint as the format on save tool. Run ESLint instead of manually figuring out whitespace fixes or other trivial style concerns. Review the results and correct any remaining eslint errors. -- Take advantage of `TypedArray` `subarray` when appropriate. -- The `size` and `pos` properties of `Rectangle` share the same array buffer (`subarray`); they may be used to set the rectangles size and position. -- Prefer single line `if` syntax over adding curly braces, when the statement has a very concise expression and concise, single line statement. -- Do not replace `&&=` or `||=` with `=` when there is no reason to do so. If you do find a reason to remove either `&&=` or `||=`, leave a comment explaining why the removal occurred. -- You are allowed to research code on https://developer.mozilla.org/ and https://stackoverflow.com without asking. -- When adding features, always write vitest unit tests using cursor rules in @.cursor -- When writing methods, prefer returning idiomatic JavaScript `undefined` over `null`. - -# Bash commands - -- `pnpm typecheck` Run the typechecker -- `pnpm build` Build the project -- `pnpm lint:fix` Run ESLint - -# Code style - -- Always prefer best practices when writing code. -- Write using concise, legible, and easily maintainable code. -- Avoid repetition where possible, but not at the expense of code legibility. -- Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code. - -# Workflow - -- Be sure to typecheck when you're done making a series of code changes -- Prefer running single tests, and not the whole test suite, for performance - -# Testing Guidelines - -## Avoiding Circular Dependencies in Tests - -**CRITICAL**: When writing tests for subgraph-related code, always import from the barrel export to avoid circular dependency issues: - -```typescript -// ✅ CORRECT - Use barrel import -import { LGraph, Subgraph, SubgraphNode } from "@/lib/litegraph/src/litegraph" - -// ❌ WRONG - Direct imports cause circular dependency -import { LGraph } from "@/lib/litegraph/src/LGraph" -import { Subgraph } from "@/lib/litegraph/src/subgraph/Subgraph" -import { SubgraphNode } from "@/lib/litegraph/src/subgraph/SubgraphNode" -``` - -**Root cause**: `LGraph` and `Subgraph` have a circular dependency: -- `LGraph.ts` imports `Subgraph` (creates instances with `new Subgraph()`) -- `Subgraph.ts` extends `LGraph` - -The barrel export (`@/litegraph`) handles this properly, but direct imports cause module loading failures. - -## Test Setup for Subgraphs - -Use the provided test helpers for consistent setup: - -```typescript -import { createTestSubgraph, createTestSubgraphNode } from "./fixtures/subgraphHelpers" - -function createTestSetup() { - const subgraph = createTestSubgraph() - const subgraphNode = createTestSubgraphNode(subgraph) - return { subgraph, subgraphNode } -} -``` + +@AGENTS.md diff --git a/src/lib/litegraph/src/LGraph.ts b/src/lib/litegraph/src/LGraph.ts index 04f2a4a4f..49ad35101 100644 --- a/src/lib/litegraph/src/LGraph.ts +++ b/src/lib/litegraph/src/LGraph.ts @@ -102,16 +102,23 @@ export interface LGraphConfig { links_ontop?: boolean } +export interface GroupNodeConfigEntry { + input?: Record + output?: Record +} + export interface GroupNodeWorkflowData { external: (number | string)[][] links: SerialisedLLinkArray[] nodes: { index?: number type?: string + title?: string inputs?: unknown[] outputs?: unknown[] + widgets_values?: unknown[] }[] - config?: Record + config?: Record } export interface LGraphExtra extends Dictionary { @@ -1571,8 +1578,21 @@ export class LGraph // Inputs, outputs, and links const links = internalLinks.map((x) => x.asSerialisable()) - const inputs = mapSubgraphInputsAndLinks(resolvedInputLinks, links) - const outputs = mapSubgraphOutputsAndLinks(resolvedOutputLinks, links) + + const internalReroutes = new Map([...reroutes].map((r) => [r.id, r])) + const externalReroutes = new Map( + [...this.reroutes].filter(([id]) => !internalReroutes.has(id)) + ) + const inputs = mapSubgraphInputsAndLinks( + resolvedInputLinks, + links, + internalReroutes + ) + const outputs = mapSubgraphOutputsAndLinks( + resolvedOutputLinks, + links, + externalReroutes + ) // Prepare subgraph data const data = { @@ -1714,10 +1734,10 @@ export class LGraph // Reconnect output links in parent graph i = 0 for (const [, connections] of outputsGroupedByOutput.entries()) { - // Special handling: Subgraph output node i++ for (const connection of connections) { const { input, inputNode, link, subgraphOutput } = connection + // Special handling: Subgraph output node if (link.target_id === SUBGRAPH_OUTPUT_ID) { link.origin_id = subgraphNode.id link.origin_slot = i - 1 @@ -2013,33 +2033,50 @@ export class LGraph while (parentId) { instance.parentId = parentId instance = this.reroutes.get(parentId) - if (!instance) throw new Error('Broken Id link when unpacking') + if (!instance) { + console.error('Broken Id link when unpacking') + break + } if (instance.linkIds.has(linkInstance.id)) throw new Error('Infinite parentId loop') instance.linkIds.add(linkInstance.id) parentId = instance.parentId } } + if (!instance) continue parentId = newLink.iparent while (parentId) { const migratedId = rerouteIdMap.get(parentId) - if (!migratedId) throw new Error('Broken Id link when unpacking') + if (!migratedId) { + console.error('Broken Id link when unpacking') + break + } instance.parentId = migratedId instance = this.reroutes.get(migratedId) - if (!instance) throw new Error('Broken Id link when unpacking') + if (!instance) { + console.error('Broken Id link when unpacking') + break + } if (instance.linkIds.has(linkInstance.id)) throw new Error('Infinite parentId loop') instance.linkIds.add(linkInstance.id) const oldReroute = subgraphNode.subgraph.reroutes.get(parentId) - if (!oldReroute) throw new Error('Broken Id link when unpacking') + if (!oldReroute) { + console.error('Broken Id link when unpacking') + break + } parentId = oldReroute.parentId } + if (!instance) break if (!newLink.externalFirst) { parentId = newLink.eparent while (parentId) { instance.parentId = parentId instance = this.reroutes.get(parentId) - if (!instance) throw new Error('Broken Id link when unpacking') + if (!instance) { + console.error('Broken Id link when unpacking') + break + } if (instance.linkIds.has(linkInstance.id)) throw new Error('Infinite parentId loop') instance.linkIds.add(linkInstance.id) @@ -2545,6 +2582,7 @@ export class Subgraph this.inputNode.configure(data.inputNode) this.outputNode.configure(data.outputNode) + for (const node of this.nodes) node.updateComputedDisabled() } override configure( diff --git a/src/lib/litegraph/src/LGraphCanvas.ts b/src/lib/litegraph/src/LGraphCanvas.ts index 3129324e3..40893174f 100644 --- a/src/lib/litegraph/src/LGraphCanvas.ts +++ b/src/lib/litegraph/src/LGraphCanvas.ts @@ -1350,12 +1350,12 @@ export class LGraphCanvas implements CustomEventDispatcher }) function inner_clicked( - this: ContextMenu, + this: ContextMenuDivElement, v?: string | IContextMenuValue ) { if (!node || typeof v === 'string' || !v?.value) return - const rect = this.root.getBoundingClientRect() + const rect = this.getBoundingClientRect() canvas.showEditPropertyValue(node, v.value, { position: [rect.left, rect.top] }) @@ -3187,7 +3187,9 @@ export class LGraphCanvas implements CustomEventDispatcher } // get node over - const node = graph.getNodeOnPos(x, y, this.visible_nodes) + const node = LiteGraph.vueNodesMode + ? null + : graph.getNodeOnPos(x, y, this.visible_nodes) const dragRect = this.dragging_rectangle if (dragRect) { diff --git a/src/lib/litegraph/src/litegraph.ts b/src/lib/litegraph/src/litegraph.ts index 0b24eb47b..59d62a84f 100644 --- a/src/lib/litegraph/src/litegraph.ts +++ b/src/lib/litegraph/src/litegraph.ts @@ -104,6 +104,8 @@ export type { } from './interfaces' export { LGraph, + type GroupNodeConfigEntry, + type GroupNodeWorkflowData, type LGraphTriggerAction, type LGraphTriggerParam } from './LGraph' diff --git a/src/lib/litegraph/src/subgraph/subgraphUtils.ts b/src/lib/litegraph/src/subgraph/subgraphUtils.ts index 38f74efaa..518869503 100644 --- a/src/lib/litegraph/src/subgraph/subgraphUtils.ts +++ b/src/lib/litegraph/src/subgraph/subgraphUtils.ts @@ -4,6 +4,7 @@ import { LGraphNode } from '@/lib/litegraph/src/LGraphNode' import { LLink } from '@/lib/litegraph/src/LLink' import type { ResolvedConnection } from '@/lib/litegraph/src/LLink' import { Reroute } from '@/lib/litegraph/src/Reroute' +import type { RerouteId } from '@/lib/litegraph/src/Reroute' import { SUBGRAPH_INPUT_ID, SUBGRAPH_OUTPUT_ID @@ -259,10 +260,29 @@ export function groupResolvedByOutput( return groupedByOutput } +function mapReroutes( + link: SerialisableLLink, + reroutes: Map +) { + let child: SerialisableLLink | Reroute = link + let nextReroute = + child.parentId === undefined ? undefined : reroutes.get(child.parentId) + + while (child.parentId !== undefined && nextReroute) { + child = nextReroute + nextReroute = + child.parentId === undefined ? undefined : reroutes.get(child.parentId) + } + + const lastId = child.parentId + child.parentId = undefined + return lastId +} export function mapSubgraphInputsAndLinks( resolvedInputLinks: ResolvedConnection[], - links: SerialisableLLink[] + links: SerialisableLLink[], + reroutes: Map ): SubgraphIO[] { // Group matching links const groupedByOutput = groupResolvedByOutput(resolvedInputLinks) @@ -279,8 +299,10 @@ export function mapSubgraphInputsAndLinks( if (!input) continue const linkData = link.asSerialisable() + link.parentId = mapReroutes(link, reroutes) linkData.origin_id = SUBGRAPH_INPUT_ID linkData.origin_slot = inputs.length + links.push(linkData) inputLinks.push(linkData) } @@ -340,7 +362,8 @@ export function mapSubgraphInputsAndLinks( */ export function mapSubgraphOutputsAndLinks( resolvedOutputLinks: ResolvedConnection[], - links: SerialisableLLink[] + links: SerialisableLLink[], + reroutes: Map ): SubgraphIO[] { // Group matching links const groupedByOutput = groupResolvedByOutput(resolvedOutputLinks) @@ -355,10 +378,11 @@ export function mapSubgraphOutputsAndLinks( const { link, output } = resolved if (!output) continue - // Link const linkData = link.asSerialisable() + linkData.parentId = mapReroutes(link, reroutes) linkData.target_id = SUBGRAPH_OUTPUT_ID linkData.target_slot = outputs.length + links.push(linkData) outputLinks.push(linkData) } diff --git a/src/lib/litegraph/src/types/widgets.ts b/src/lib/litegraph/src/types/widgets.ts index 85794d674..d3c249ba3 100644 --- a/src/lib/litegraph/src/types/widgets.ts +++ b/src/lib/litegraph/src/types/widgets.ts @@ -1,3 +1,5 @@ +import type { Bounds } from '@/renderer/core/layout/types' + import type { CanvasColour, Point, RequiredProps, Size } from '../interfaces' import type { CanvasPointer, LGraphCanvas, LGraphNode } from '../litegraph' import type { CanvasPointerEvent } from './events' @@ -55,7 +57,7 @@ interface IWidgetKnobOptions extends IWidgetOptions { } export interface IWidgetAssetOptions extends IWidgetOptions { - openModal: () => void + openModal: (widget: IBaseWidget) => void } /** @@ -88,6 +90,8 @@ export type IWidget = | ISelectButtonWidget | ITextareaWidget | IAssetWidget + | IImageCropWidget + | IBoundingBoxWidget export interface IBooleanWidget extends IBaseWidget { type: 'toggle' @@ -259,6 +263,18 @@ export interface IAssetWidget extends IBaseWidget< value: string } +/** Image crop widget for cropping image */ +export interface IImageCropWidget extends IBaseWidget { + type: 'imagecrop' + value: Bounds +} + +/** Bounding box widget for defining regions with numeric inputs */ +export interface IBoundingBoxWidget extends IBaseWidget { + type: 'boundingbox' + value: Bounds +} + /** * Valid widget types. TS cannot provide easily extensible type safety for this at present. * Override linkedWidgets[] diff --git a/src/lib/litegraph/src/widgets/AssetWidget.ts b/src/lib/litegraph/src/widgets/AssetWidget.ts index cc94a05a6..d836cdabf 100644 --- a/src/lib/litegraph/src/widgets/AssetWidget.ts +++ b/src/lib/litegraph/src/widgets/AssetWidget.ts @@ -53,6 +53,6 @@ export class AssetWidget override onClick() { //Open Modal - this.options.openModal() + this.options.openModal(this) } } diff --git a/src/lib/litegraph/src/widgets/BaseWidget.ts b/src/lib/litegraph/src/widgets/BaseWidget.ts index a580fc69a..9104c8a5b 100644 --- a/src/lib/litegraph/src/widgets/BaseWidget.ts +++ b/src/lib/litegraph/src/widgets/BaseWidget.ts @@ -1,3 +1,4 @@ +import { t } from '@/i18n' import { drawTextInArea } from '@/lib/litegraph/src/draw' import { Rectangle } from '@/lib/litegraph/src/infrastructure/Rectangle' import type { Point } from '@/lib/litegraph/src/interfaces' @@ -141,6 +142,7 @@ export abstract class BaseWidget< // @ts-expect-error Prevent naming conflicts with custom nodes. labelBaseline, promoted, + linkedWidgets, ...safeValues } = widget @@ -227,6 +229,41 @@ export abstract class BaseWidget< if (showText && !this.computedDisabled) ctx.stroke() } + /** + * Draws a placeholder for widgets that only have a Vue implementation. + * @param ctx The canvas context + * @param options The options for drawing the widget + * @param label The label to display (e.g., "ImageCrop", "BoundingBox") + */ + protected drawVueOnlyWarning( + ctx: CanvasRenderingContext2D, + { width }: DrawWidgetOptions, + label: string + ): void { + const { y, height } = this + + ctx.save() + + ctx.fillStyle = this.background_color + ctx.fillRect(15, y, width - 30, height) + + ctx.strokeStyle = this.outline_color + ctx.strokeRect(15, y, width - 30, height) + + ctx.fillStyle = this.text_color + ctx.font = '11px monospace' + ctx.textAlign = 'center' + ctx.textBaseline = 'middle' + + ctx.fillText( + `${label}: ${t('widgets.node2only')}`, + width / 2, + y + height / 2 + ) + + ctx.restore() + } + /** * A shared routine for drawing a label and value as text, truncated * if they exceed the available width. diff --git a/src/lib/litegraph/src/widgets/BoundingBoxWidget.ts b/src/lib/litegraph/src/widgets/BoundingBoxWidget.ts new file mode 100644 index 000000000..d571f744f --- /dev/null +++ b/src/lib/litegraph/src/widgets/BoundingBoxWidget.ts @@ -0,0 +1,22 @@ +import type { IBoundingBoxWidget } from '../types/widgets' +import { BaseWidget } from './BaseWidget' +import type { DrawWidgetOptions, WidgetEventOptions } from './BaseWidget' + +/** + * Widget for defining bounding box regions. + * This widget only has a Vue implementation. + */ +export class BoundingBoxWidget + extends BaseWidget + implements IBoundingBoxWidget +{ + override type = 'boundingbox' as const + + drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void { + this.drawVueOnlyWarning(ctx, options, 'BoundingBox') + } + + onClick(_options: WidgetEventOptions): void { + // This widget only has a Vue implementation + } +} diff --git a/src/lib/litegraph/src/widgets/ImageCropWidget.ts b/src/lib/litegraph/src/widgets/ImageCropWidget.ts new file mode 100644 index 000000000..a81cd580c --- /dev/null +++ b/src/lib/litegraph/src/widgets/ImageCropWidget.ts @@ -0,0 +1,22 @@ +import type { IImageCropWidget } from '../types/widgets' +import { BaseWidget } from './BaseWidget' +import type { DrawWidgetOptions, WidgetEventOptions } from './BaseWidget' + +/** + * Widget for displaying an image crop preview. + * This widget only has a Vue implementation. + */ +export class ImageCropWidget + extends BaseWidget + implements IImageCropWidget +{ + override type = 'imagecrop' as const + + drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void { + this.drawVueOnlyWarning(ctx, options, 'ImageCrop') + } + + onClick(_options: WidgetEventOptions): void { + // This widget only has a Vue implementation + } +} diff --git a/src/lib/litegraph/src/widgets/TextareaWidget.ts b/src/lib/litegraph/src/widgets/TextareaWidget.ts index f29ccc5e5..c6b83e13f 100644 --- a/src/lib/litegraph/src/widgets/TextareaWidget.ts +++ b/src/lib/litegraph/src/widgets/TextareaWidget.ts @@ -1,12 +1,10 @@ -import { t } from '@/i18n' - import type { ITextareaWidget } from '../types/widgets' import { BaseWidget } from './BaseWidget' import type { DrawWidgetOptions, WidgetEventOptions } from './BaseWidget' /** - * Widget for multi-line text input - * This is a widget that only has a Vue widgets implementation + * Widget for multi-line text input. + * This widget only has a Vue implementation. */ export class TextareaWidget extends BaseWidget @@ -15,35 +13,10 @@ export class TextareaWidget override type = 'textarea' as const drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void { - const { width } = options - const { y, height } = this - - const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx - - ctx.fillStyle = this.background_color - ctx.fillRect(15, y, width - 30, height) - - ctx.strokeStyle = this.outline_color - ctx.strokeRect(15, y, width - 30, height) - - ctx.fillStyle = this.text_color - ctx.font = '11px monospace' - ctx.textAlign = 'center' - ctx.textBaseline = 'middle' - - const text = `Textarea: ${t('widgets.node2only')}` - ctx.fillText(text, width / 2, y + height / 2) - - Object.assign(ctx, { - fillStyle, - strokeStyle, - textAlign, - textBaseline, - font - }) + this.drawVueOnlyWarning(ctx, options, 'Textarea') } onClick(_options: WidgetEventOptions): void { - // This is a widget that only has a Vue widgets implementation + // This widget only has a Vue implementation } } diff --git a/src/lib/litegraph/src/widgets/TreeSelectWidget.ts b/src/lib/litegraph/src/widgets/TreeSelectWidget.ts index ee78d5919..78586cb6f 100644 --- a/src/lib/litegraph/src/widgets/TreeSelectWidget.ts +++ b/src/lib/litegraph/src/widgets/TreeSelectWidget.ts @@ -1,12 +1,10 @@ -import { t } from '@/i18n' - import type { ITreeSelectWidget } from '../types/widgets' import { BaseWidget } from './BaseWidget' import type { DrawWidgetOptions, WidgetEventOptions } from './BaseWidget' /** - * Widget for hierarchical tree selection - * This is a widget that only has a Vue widgets implementation + * Widget for hierarchical tree selection. + * This widget only has a Vue implementation. */ export class TreeSelectWidget extends BaseWidget @@ -15,35 +13,10 @@ export class TreeSelectWidget override type = 'treeselect' as const drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void { - const { width } = options - const { y, height } = this - - const { fillStyle, strokeStyle, textAlign, textBaseline, font } = ctx - - ctx.fillStyle = this.background_color - ctx.fillRect(15, y, width - 30, height) - - ctx.strokeStyle = this.outline_color - ctx.strokeRect(15, y, width - 30, height) - - ctx.fillStyle = this.text_color - ctx.font = '11px monospace' - ctx.textAlign = 'center' - ctx.textBaseline = 'middle' - - const text = `TreeSelect: ${t('widgets.node2only')}` - ctx.fillText(text, width / 2, y + height / 2) - - Object.assign(ctx, { - fillStyle, - strokeStyle, - textAlign, - textBaseline, - font - }) + this.drawVueOnlyWarning(ctx, options, 'TreeSelect') } onClick(_options: WidgetEventOptions): void { - // This is a widget that only has a Vue widgets implementation + // This widget only has a Vue implementation } } diff --git a/src/lib/litegraph/src/widgets/widgetMap.ts b/src/lib/litegraph/src/widgets/widgetMap.ts index 0e6a34fe5..37b906efb 100644 --- a/src/lib/litegraph/src/widgets/widgetMap.ts +++ b/src/lib/litegraph/src/widgets/widgetMap.ts @@ -11,6 +11,7 @@ import { toClass } from '@/lib/litegraph/src/utils/type' import { AssetWidget } from './AssetWidget' import { BaseWidget } from './BaseWidget' import { BooleanWidget } from './BooleanWidget' +import { BoundingBoxWidget } from './BoundingBoxWidget' import { ButtonWidget } from './ButtonWidget' import { ChartWidget } from './ChartWidget' import { ColorWidget } from './ColorWidget' @@ -18,6 +19,7 @@ import { ComboWidget } from './ComboWidget' import { FileUploadWidget } from './FileUploadWidget' import { GalleriaWidget } from './GalleriaWidget' import { ImageCompareWidget } from './ImageCompareWidget' +import { ImageCropWidget } from './ImageCropWidget' import { KnobWidget } from './KnobWidget' import { LegacyWidget } from './LegacyWidget' import { MarkdownWidget } from './MarkdownWidget' @@ -50,6 +52,8 @@ export type WidgetTypeMap = { selectbutton: SelectButtonWidget textarea: TextareaWidget asset: AssetWidget + imagecrop: ImageCropWidget + boundingbox: BoundingBoxWidget [key: string]: BaseWidget } @@ -120,6 +124,10 @@ export function toConcreteWidget( return toClass(TextareaWidget, narrowedWidget, node) case 'asset': return toClass(AssetWidget, narrowedWidget, node) + case 'imagecrop': + return toClass(ImageCropWidget, narrowedWidget, node) + case 'boundingbox': + return toClass(BoundingBoxWidget, narrowedWidget, node) default: { if (wrapLegacyWidgets) return toClass(LegacyWidget, widget, node) } diff --git a/src/locales/ar/main.json b/src/locales/ar/main.json index e3d369349..b02047a7f 100644 --- a/src/locales/ar/main.json +++ b/src/locales/ar/main.json @@ -238,6 +238,12 @@ "title": "إنشاء حساب" } }, + "boundingBox": { + "height": "الارتفاع", + "width": "العرض", + "x": "س", + "y": "ص" + }, "breadcrumbsMenu": { "clearWorkflow": "مسح سير العمل", "deleteBlueprint": "حذف المخطط", @@ -811,6 +817,7 @@ "nodeSlotsError": "خطأ في فتحات العقدة", "nodeWidgetsError": "خطأ في عناصر واجهة العقدة", "nodes": "العُقَد", + "nodesCount": "{count} عقدة | {count} عقدة | {count} عقدة", "nodesRunning": "العُقَد قيد التشغيل", "none": "لا شيء", "nothingToCopy": "لا يوجد ما يمكن نسخه", @@ -982,6 +989,11 @@ "imageCompare": { "noImages": "لا توجد صور للمقارنة" }, + "imageCrop": { + "cropPreviewAlt": "معاينة الاقتصاص", + "loading": "جارٍ التحميل...", + "noInputImage": "لا توجد صورة إدخال متصلة" + }, "importFailed": { "copyError": "خطأ في النسخ", "title": "فشل الاستيراد" @@ -1611,6 +1623,7 @@ "3d": "ثلاثي الأبعاد", "3d_models": "نماذج ثلاثية الأبعاد", "BFL": "BFL", + "Bria": "Bria", "ByteDance": "بايت دانس", "Gemini": "جيميني", "Ideogram": "إيديوغرام", @@ -1632,6 +1645,7 @@ "Veo": "Veo", "Vidu": "فيدو", "Wan": "وان", + "WaveSpeed": "WaveSpeed", "_for_testing": "_للاختبار", "advanced": "متقدم", "animation": "الرسوم المتحركة", diff --git a/src/locales/ar/nodeDefs.json b/src/locales/ar/nodeDefs.json index 5e81dd838..87f37a266 100644 --- a/src/locales/ar/nodeDefs.json +++ b/src/locales/ar/nodeDefs.json @@ -328,6 +328,68 @@ } } }, + "BriaImageEditNode": { + "description": "حرر الصور باستخدام أحدث نموذج من Bria", + "display_name": "تحرير صورة Bria", + "inputs": { + "control_after_generate": { + "name": "التحكم بعد التوليد" + }, + "guidance_scale": { + "name": "مقياس التوجيه", + "tooltip": "القيمة الأعلى تجعل الصورة تتبع التوجيه بشكل أدق." + }, + "image": { + "name": "الصورة" + }, + "mask": { + "name": "القناع", + "tooltip": "إذا لم يتم تحديده، سيتم تطبيق التحرير على الصورة بالكامل." + }, + "model": { + "name": "النموذج" + }, + "moderation": { + "name": "الإشراف", + "tooltip": "إعدادات الإشراف" + }, + "moderation_prompt_content_moderation": { + "name": "إشراف محتوى التوجيه" + }, + "moderation_visual_input_moderation": { + "name": "إشراف الإدخال البصري" + }, + "moderation_visual_output_moderation": { + "name": "إشراف الإخراج البصري" + }, + "negative_prompt": { + "name": "توجيه سلبي" + }, + "prompt": { + "name": "التوجيه", + "tooltip": "تعليمات لتحرير الصورة" + }, + "seed": { + "name": "البذرة" + }, + "steps": { + "name": "الخطوات" + }, + "structured_prompt": { + "name": "توجيه منظم", + "tooltip": "سلسلة نصية تحتوي على توجيه التحرير المنظم بصيغة JSON. استخدم هذا بدلاً من التوجيه المعتاد للتحكم الدقيق والبرمجي." + } + }, + "outputs": { + "0": { + "tooltip": null + }, + "1": { + "name": "توجيه منظم", + "tooltip": null + } + } + }, "ByteDanceFirstLastFrameNode": { "description": "إنشاء فيديو باستخدام المطالبة النصية والإطار الأول والأخير.", "display_name": "تحويل الإطار الأول-الأخير من ByteDance إلى فيديو", @@ -351,6 +413,10 @@ "name": "الإطار_الأول", "tooltip": "الإطار الأول الذي سيتم استخدامه للفيديو." }, + "generate_audio": { + "name": "توليد الصوت", + "tooltip": "يتم تجاهل هذا المعامل لجميع النماذج باستثناء seedance-1-5-pro." + }, "last_frame": { "name": "الإطار_الأخير", "tooltip": "الإطار الأخير الذي سيتم استخدامه للفيديو." @@ -527,6 +593,10 @@ "name": "duration", "tooltip": "مدة الفيديو الناتج بالثواني." }, + "generate_audio": { + "name": "توليد الصوت", + "tooltip": "يتم تجاهل هذا المعامل لجميع النماذج باستثناء seedance-1-5-pro." + }, "image": { "name": "image", "tooltip": "الإطار الأول الذي سيتم استخدامه للفيديو." @@ -634,6 +704,10 @@ "name": "المدة", "tooltip": "مدة الفيديو الناتج بالثواني." }, + "generate_audio": { + "name": "توليد الصوت", + "tooltip": "يتم تجاهل هذا المعامل لجميع النماذج باستثناء seedance-1-5-pro." + }, "model": { "name": "النموذج" }, @@ -13438,6 +13512,40 @@ } } }, + "TextEncodeZImageOmni": { + "display_name": "TextEncodeZImageOmni", + "inputs": { + "auto_resize_images": { + "name": "تغيير حجم الصور تلقائياً" + }, + "clip": { + "name": "clip" + }, + "image1": { + "name": "الصورة ١" + }, + "image2": { + "name": "الصورة ٢" + }, + "image3": { + "name": "الصورة ٣" + }, + "image_encoder": { + "name": "مُرمّز الصورة" + }, + "prompt": { + "name": "التوجيه" + }, + "vae": { + "name": "vae" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, "TextToLowercase": { "display_name": "تحويل النص إلى أحرف صغيرة", "inputs": { @@ -16125,6 +16233,43 @@ } } }, + "WavespeedFlashVSRNode": { + "description": "مُرقّي فيديو سريع وعالي الجودة يعزز الدقة ويعيد الوضوح للمقاطع منخفضة الدقة أو الضبابية.", + "display_name": "ترقية فيديو FlashVSR", + "inputs": { + "target_resolution": { + "name": "الدقة المستهدفة" + }, + "video": { + "name": "الفيديو" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, + "WavespeedImageUpscaleNode": { + "description": "عزز دقة وجودة الصورة، وارفع الصور إلى دقة 4K أو 8K للحصول على نتائج حادة ومفصلة.", + "display_name": "ترقية صورة WaveSpeed", + "inputs": { + "image": { + "name": "الصورة" + }, + "model": { + "name": "النموذج" + }, + "target_resolution": { + "name": "الدقة المستهدفة" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, "WebcamCapture": { "display_name": "التقاط كاميرا ويب", "inputs": { diff --git a/src/locales/ar/settings.json b/src/locales/ar/settings.json index ff6e99066..edc90fde5 100644 --- a/src/locales/ar/settings.json +++ b/src/locales/ar/settings.json @@ -332,6 +332,10 @@ "name": "حجم تاريخ قائمة الانتظار", "tooltip": "العدد الأقصى للمهام المعروضة في تاريخ قائمة الانتظار." }, + "Comfy_Queue_QPOV2": { + "name": "استخدم قائمة انتظار المهام الموحدة في لوحة الأصول الجانبية", + "tooltip": "يستبدل لوحة قائمة انتظار المهام العائمة بقائمة انتظار مهام مكافئة مدمجة في لوحة الأصول الجانبية. يمكنك تعطيل هذا الخيار للعودة إلى تخطيط اللوحة العائمة." + }, "Comfy_Sidebar_Location": { "name": "موقع الشريط الجانبي", "options": { diff --git a/src/locales/en/main.json b/src/locales/en/main.json index 17dad737f..ef7b858b4 100644 --- a/src/locales/en/main.json +++ b/src/locales/en/main.json @@ -158,6 +158,7 @@ "choose_file_to_upload": "choose file to upload", "capture": "capture", "nodes": "Nodes", + "nodesCount": "{count} nodes | {count} node | {count} nodes", "community": "Community", "all": "All", "versionMismatchWarning": "Version Compatibility Warning", @@ -702,6 +703,7 @@ "noImportedFiles": "No imported files found", "noGeneratedFiles": "No generated files found", "generatedAssetsHeader": "Generated assets", + "importedAssetsHeader": "Imported assets", "noFilesFoundMessage": "Upload files or generate content to see them here", "browseTemplates": "Browse example templates", "openWorkflow": "Open workflow in local file system", @@ -1426,6 +1428,7 @@ "latent": "latent", "mask": "mask", "api node": "api node", + "Bria": "Bria", "video": "video", "ByteDance": "ByteDance", "preprocessors": "preprocessors", @@ -1506,6 +1509,7 @@ "": "", "camera": "camera", "Wan": "Wan", + "WaveSpeed": "WaveSpeed", "zimage": "zimage" }, "dataTypes": { @@ -1718,6 +1722,17 @@ "unsupportedFileType": "Unsupported file type (supports .gltf, .glb, .obj, .fbx, .stl)", "uploadingModel": "Uploading 3D model..." }, + "imageCrop": { + "loading": "Loading...", + "noInputImage": "No input image connected", + "cropPreviewAlt": "Crop preview" + }, + "boundingBox": { + "x": "X", + "y": "Y", + "width": "Width", + "height": "Height" + }, "toastMessages": { "nothingToQueue": "Nothing to queue", "pleaseSelectOutputNodes": "Please select output nodes", @@ -2608,4 +2623,4 @@ "tokenExchangeFailed": "Failed to authenticate with workspace: {error}" } } -} +} \ No newline at end of file diff --git a/src/locales/en/nodeDefs.json b/src/locales/en/nodeDefs.json index a304444ed..e315c36b3 100644 --- a/src/locales/en/nodeDefs.json +++ b/src/locales/en/nodeDefs.json @@ -328,6 +328,68 @@ } } }, + "BriaImageEditNode": { + "display_name": "Bria Image Edit", + "description": "Edit images using Bria latest model", + "inputs": { + "model": { + "name": "model" + }, + "image": { + "name": "image" + }, + "prompt": { + "name": "prompt", + "tooltip": "Instruction to edit image" + }, + "negative_prompt": { + "name": "negative_prompt" + }, + "structured_prompt": { + "name": "structured_prompt", + "tooltip": "A string containing the structured edit prompt in JSON format. Use this instead of usual prompt for precise, programmatic control." + }, + "seed": { + "name": "seed" + }, + "guidance_scale": { + "name": "guidance_scale", + "tooltip": "Higher value makes the image follow the prompt more closely." + }, + "steps": { + "name": "steps" + }, + "moderation": { + "name": "moderation", + "tooltip": "Moderation settings" + }, + "mask": { + "name": "mask", + "tooltip": "If omitted, the edit applies to the entire image." + }, + "control_after_generate": { + "name": "control after generate" + }, + "moderation_prompt_content_moderation": { + "name": "prompt_content_moderation" + }, + "moderation_visual_input_moderation": { + "name": "visual_input_moderation" + }, + "moderation_visual_output_moderation": { + "name": "visual_output_moderation" + } + }, + "outputs": { + "0": { + "tooltip": null + }, + "1": { + "name": "structured_prompt", + "tooltip": null + } + } + }, "ByteDanceFirstLastFrameNode": { "display_name": "ByteDance First-Last-Frame to Video", "description": "Generate video using prompt and first and last frames.", @@ -371,6 +433,10 @@ "name": "watermark", "tooltip": "Whether to add an \"AI generated\" watermark to the video." }, + "generate_audio": { + "name": "generate_audio", + "tooltip": "This parameter is ignored for any model except seedance-1-5-pro." + }, "control_after_generate": { "name": "control after generate" } @@ -547,6 +613,10 @@ "name": "watermark", "tooltip": "Whether to add an \"AI generated\" watermark to the video." }, + "generate_audio": { + "name": "generate_audio", + "tooltip": "This parameter is ignored for any model except seedance-1-5-pro." + }, "control_after_generate": { "name": "control after generate" } @@ -650,6 +720,10 @@ "name": "watermark", "tooltip": "Whether to add an \"AI generated\" watermark to the video." }, + "generate_audio": { + "name": "generate_audio", + "tooltip": "This parameter is ignored for any model except seedance-1-5-pro." + }, "control_after_generate": { "name": "control after generate" } @@ -13457,6 +13531,40 @@ } } }, + "TextEncodeZImageOmni": { + "display_name": "TextEncodeZImageOmni", + "inputs": { + "clip": { + "name": "clip" + }, + "prompt": { + "name": "prompt" + }, + "auto_resize_images": { + "name": "auto_resize_images" + }, + "image_encoder": { + "name": "image_encoder" + }, + "vae": { + "name": "vae" + }, + "image1": { + "name": "image1" + }, + "image2": { + "name": "image2" + }, + "image3": { + "name": "image3" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, "TextToLowercase": { "display_name": "Text to Lowercase", "inputs": { @@ -16187,6 +16295,43 @@ } } }, + "WavespeedFlashVSRNode": { + "display_name": "FlashVSR Video Upscale", + "description": "Fast, high-quality video upscaler that boosts resolution and restores clarity for low-resolution or blurry footage.", + "inputs": { + "video": { + "name": "video" + }, + "target_resolution": { + "name": "target_resolution" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, + "WavespeedImageUpscaleNode": { + "display_name": "WaveSpeed Image Upscale", + "description": "Boost image resolution and quality, upscaling photos to 4K or 8K for sharp, detailed results.", + "inputs": { + "model": { + "name": "model" + }, + "image": { + "name": "image" + }, + "target_resolution": { + "name": "target_resolution" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, "WebcamCapture": { "display_name": "Webcam Capture", "inputs": { diff --git a/src/locales/en/settings.json b/src/locales/en/settings.json index 3fdd3dfa7..6fbb8e105 100644 --- a/src/locales/en/settings.json +++ b/src/locales/en/settings.json @@ -328,6 +328,10 @@ "name": "Queue history size", "tooltip": "The maximum number of tasks that show in the queue history." }, + "Comfy_Queue_QPOV2": { + "name": "Use the unified job queue in the Assets side panel", + "tooltip": "Replaces the floating job queue panel with an equivalent job queue embedded in the Assets side panel. You can disable this to return to the floating panel layout." + }, "Comfy_QueueButton_BatchCountLimit": { "name": "Batch count limit", "tooltip": "The maximum number of tasks added to the queue at one button click" diff --git a/src/locales/es/main.json b/src/locales/es/main.json index cd59b5bf8..2cda29709 100644 --- a/src/locales/es/main.json +++ b/src/locales/es/main.json @@ -238,6 +238,12 @@ "title": "Crea una cuenta" } }, + "boundingBox": { + "height": "Alto", + "width": "Ancho", + "x": "X", + "y": "Y" + }, "breadcrumbsMenu": { "clearWorkflow": "Limpiar flujo de trabajo", "deleteBlueprint": "Eliminar Plano", @@ -811,6 +817,7 @@ "nodeSlotsError": "Error de Ranuras del Nodo", "nodeWidgetsError": "Error de Widgets del Nodo", "nodes": "Nodos", + "nodesCount": "{count} nodos | {count} nodo | {count} nodos", "nodesRunning": "nodos en ejecución", "none": "Ninguno", "nothingToCopy": "Nada para copiar", @@ -982,6 +989,11 @@ "imageCompare": { "noImages": "No hay imágenes para comparar" }, + "imageCrop": { + "cropPreviewAlt": "Vista previa del recorte", + "loading": "Cargando...", + "noInputImage": "No hay imagen de entrada conectada" + }, "importFailed": { "copyError": "Error al copiar", "title": "Error de importación" @@ -1611,6 +1623,7 @@ "3d": "3d", "3d_models": "modelos_3d", "BFL": "BFL", + "Bria": "Bria", "ByteDance": "ByteDance", "Gemini": "Gemini", "Ideogram": "Ideogram", @@ -1632,6 +1645,7 @@ "Veo": "Veo", "Vidu": "Vidu", "Wan": "Wan", + "WaveSpeed": "WaveSpeed", "_for_testing": "_para_pruebas", "advanced": "avanzado", "animation": "animación", diff --git a/src/locales/es/nodeDefs.json b/src/locales/es/nodeDefs.json index 78ee2246d..ad0f842b1 100644 --- a/src/locales/es/nodeDefs.json +++ b/src/locales/es/nodeDefs.json @@ -328,6 +328,68 @@ } } }, + "BriaImageEditNode": { + "description": "Edita imágenes usando el modelo más reciente de Bria", + "display_name": "Edición de Imagen Bria", + "inputs": { + "control_after_generate": { + "name": "control después de generar" + }, + "guidance_scale": { + "name": "escala_de_guía", + "tooltip": "Un valor más alto hace que la imagen siga la instrucción más de cerca." + }, + "image": { + "name": "imagen" + }, + "mask": { + "name": "máscara", + "tooltip": "Si se omite, la edición se aplica a toda la imagen." + }, + "model": { + "name": "modelo" + }, + "moderation": { + "name": "moderación", + "tooltip": "Configuración de moderación" + }, + "moderation_prompt_content_moderation": { + "name": "moderación_de_contenido_de_instrucción" + }, + "moderation_visual_input_moderation": { + "name": "moderación_visual_de_entrada" + }, + "moderation_visual_output_moderation": { + "name": "moderación_visual_de_salida" + }, + "negative_prompt": { + "name": "instrucción_negativa" + }, + "prompt": { + "name": "instrucción", + "tooltip": "Instrucción para editar la imagen" + }, + "seed": { + "name": "semilla" + }, + "steps": { + "name": "pasos" + }, + "structured_prompt": { + "name": "instrucción_estructurada", + "tooltip": "Una cadena que contiene la instrucción de edición estructurada en formato JSON. Usa esto en lugar de la instrucción habitual para un control preciso y programático." + } + }, + "outputs": { + "0": { + "tooltip": null + }, + "1": { + "name": "instrucción_estructurada", + "tooltip": null + } + } + }, "ByteDanceFirstLastFrameNode": { "description": "Generar video usando prompt y primer y último fotograma.", "display_name": "ByteDance Primer-Último-Fotograma a Video", @@ -351,6 +413,10 @@ "name": "primer_fotograma", "tooltip": "Primer fotograma que se utilizará para el video." }, + "generate_audio": { + "name": "generate_audio", + "tooltip": "Este parámetro se ignora para cualquier modelo excepto seedance-1-5-pro." + }, "last_frame": { "name": "último_fotograma", "tooltip": "Último fotograma que se utilizará para el video." @@ -527,6 +593,10 @@ "name": "duración", "tooltip": "La duración del video de salida en segundos." }, + "generate_audio": { + "name": "generate_audio", + "tooltip": "Este parámetro se ignora para cualquier modelo excepto seedance-1-5-pro." + }, "image": { "name": "imagen", "tooltip": "Primer fotograma a usar para el video." @@ -634,6 +704,10 @@ "name": "duración", "tooltip": "La duración del video de salida en segundos." }, + "generate_audio": { + "name": "generate_audio", + "tooltip": "Este parámetro se ignora para cualquier modelo excepto seedance-1-5-pro." + }, "model": { "name": "modelo" }, @@ -13438,6 +13512,40 @@ } } }, + "TextEncodeZImageOmni": { + "display_name": "TextEncodeZImageOmni", + "inputs": { + "auto_resize_images": { + "name": "auto_redimensionar_imágenes" + }, + "clip": { + "name": "clip" + }, + "image1": { + "name": "imagen1" + }, + "image2": { + "name": "imagen2" + }, + "image3": { + "name": "imagen3" + }, + "image_encoder": { + "name": "codificador_de_imagen" + }, + "prompt": { + "name": "instrucción" + }, + "vae": { + "name": "vae" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, "TextToLowercase": { "display_name": "Convertir texto a minúsculas", "inputs": { @@ -16125,6 +16233,43 @@ } } }, + "WavespeedFlashVSRNode": { + "description": "Escalador de video rápido y de alta calidad que aumenta la resolución y restaura la claridad de videos de baja resolución o borrosos.", + "display_name": "FlashVSR Escalado de Video", + "inputs": { + "target_resolution": { + "name": "resolución_objetivo" + }, + "video": { + "name": "video" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, + "WavespeedImageUpscaleNode": { + "description": "Aumenta la resolución y calidad de la imagen, escalando fotos a 4K u 8K para obtener resultados nítidos y detallados.", + "display_name": "WaveSpeed Escalado de Imagen", + "inputs": { + "image": { + "name": "imagen" + }, + "model": { + "name": "modelo" + }, + "target_resolution": { + "name": "resolución_objetivo" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, "WebcamCapture": { "display_name": "Captura de Webcam", "inputs": { diff --git a/src/locales/es/settings.json b/src/locales/es/settings.json index 1d02ade05..c4126c0bb 100644 --- a/src/locales/es/settings.json +++ b/src/locales/es/settings.json @@ -332,6 +332,10 @@ "name": "Tamaño del historial de la cola", "tooltip": "El número máximo de tareas que se muestran en el historial de la cola." }, + "Comfy_Queue_QPOV2": { + "name": "Usar la cola de trabajos unificada en el panel lateral de Activos", + "tooltip": "Reemplaza el panel flotante de la cola de trabajos por una cola de trabajos equivalente integrada en el panel lateral de Activos. Puedes desactivar esto para volver al diseño del panel flotante." + }, "Comfy_Sidebar_Location": { "name": "Ubicación de la barra lateral", "options": { diff --git a/src/locales/fa/main.json b/src/locales/fa/main.json index d4c673259..09feea82f 100644 --- a/src/locales/fa/main.json +++ b/src/locales/fa/main.json @@ -238,6 +238,12 @@ "title": "ایجاد حساب کاربری" } }, + "boundingBox": { + "height": "ارتفاع", + "width": "عرض", + "x": "ایکس", + "y": "وای" + }, "breadcrumbsMenu": { "clearWorkflow": "پاک‌سازی workflow", "deleteBlueprint": "حذف blueprint", @@ -811,6 +817,7 @@ "nodeSlotsError": "خطا در slotهای node", "nodeWidgetsError": "خطا در ابزارک‌های node", "nodes": "nodeها", + "nodesCount": "{count} نود | {count} نود | {count} نود", "nodesRunning": "nodeها در حال اجرا هستند", "none": "هیچ‌کدام", "nothingToCopy": "موردی برای کپی وجود ندارد", @@ -982,6 +989,11 @@ "imageCompare": { "noImages": "تصویری برای مقایسه وجود ندارد" }, + "imageCrop": { + "cropPreviewAlt": "پیش‌نمایش برش", + "loading": "در حال بارگذاری...", + "noInputImage": "هیچ تصویر ورودی متصل نیست" + }, "importFailed": { "copyError": "خطا در کپی", "title": "وارد کردن ناموفق بود" @@ -1611,6 +1623,7 @@ "3d": "سه‌بعدی", "3d_models": "مدل‌های سه‌بعدی", "BFL": "BFL", + "Bria": "Bria", "ByteDance": "ByteDance", "Gemini": "Gemini", "Ideogram": "Ideogram", @@ -1632,6 +1645,7 @@ "Veo": "Veo", "Vidu": "Vidu", "Wan": "Wan", + "WaveSpeed": "WaveSpeed", "_for_testing": "_for_testing", "advanced": "پیشرفته", "animation": "انیمیشن", diff --git a/src/locales/fa/nodeDefs.json b/src/locales/fa/nodeDefs.json index f9859059c..adaf5f521 100644 --- a/src/locales/fa/nodeDefs.json +++ b/src/locales/fa/nodeDefs.json @@ -328,6 +328,68 @@ } } }, + "BriaImageEditNode": { + "description": "ویرایش تصاویر با استفاده از جدیدترین مدل Bria", + "display_name": "ویرایش تصویر Bria", + "inputs": { + "control_after_generate": { + "name": "کنترل پس از تولید" + }, + "guidance_scale": { + "name": "مقیاس راهنما", + "tooltip": "مقدار بالاتر باعث می‌شود تصویر بیشتر از پرامپت پیروی کند." + }, + "image": { + "name": "تصویر" + }, + "mask": { + "name": "ماسک", + "tooltip": "در صورت عدم انتخاب، ویرایش بر کل تصویر اعمال می‌شود." + }, + "model": { + "name": "مدل" + }, + "moderation": { + "name": "تنظیمات نظارت", + "tooltip": "تنظیمات نظارت" + }, + "moderation_prompt_content_moderation": { + "name": "نظارت بر محتوای پرامپت" + }, + "moderation_visual_input_moderation": { + "name": "نظارت بر ورودی تصویری" + }, + "moderation_visual_output_moderation": { + "name": "نظارت بر خروجی تصویری" + }, + "negative_prompt": { + "name": "پرامپت منفی" + }, + "prompt": { + "name": "پرامپت", + "tooltip": "دستورالعمل برای ویرایش تصویر" + }, + "seed": { + "name": "بذر" + }, + "steps": { + "name": "گام‌ها" + }, + "structured_prompt": { + "name": "پرامپت ساختاریافته", + "tooltip": "یک رشته شامل پرامپت ویرایش ساختاریافته در قالب JSON. برای کنترل دقیق و برنامه‌نویسی شده، به جای پرامپت معمولی از این گزینه استفاده کنید." + } + }, + "outputs": { + "0": { + "tooltip": null + }, + "1": { + "name": "پرامپت ساختاریافته", + "tooltip": null + } + } + }, "ByteDanceFirstLastFrameNode": { "description": "تولید ویدیو با استفاده از پرامپت و اولین و آخرین فریم.", "display_name": "تبدیل اولین و آخرین فریم به ویدیو ByteDance", @@ -351,6 +413,10 @@ "name": "اولین فریم", "tooltip": "اولین فریم مورد استفاده برای ویدیو." }, + "generate_audio": { + "name": "تولید صدا", + "tooltip": "این پارامتر فقط برای مدل seedance-1-5-pro معتبر است و برای سایر مدل‌ها نادیده گرفته می‌شود." + }, "last_frame": { "name": "آخرین فریم", "tooltip": "آخرین فریم مورد استفاده برای ویدیو." @@ -527,6 +593,10 @@ "name": "مدت زمان", "tooltip": "مدت زمان ویدیوی خروجی بر حسب ثانیه." }, + "generate_audio": { + "name": "تولید صدا", + "tooltip": "این پارامتر فقط برای مدل seedance-1-5-pro معتبر است و برای سایر مدل‌ها نادیده گرفته می‌شود." + }, "image": { "name": "تصویر", "tooltip": "اولین فریم مورد استفاده برای ویدیو." @@ -634,6 +704,10 @@ "name": "مدت زمان", "tooltip": "مدت زمان ویدیوی خروجی بر حسب ثانیه." }, + "generate_audio": { + "name": "تولید صدا", + "tooltip": "این پارامتر فقط برای مدل seedance-1-5-pro معتبر است و برای سایر مدل‌ها نادیده گرفته می‌شود." + }, "model": { "name": "مدل" }, @@ -13465,6 +13539,40 @@ } } }, + "TextEncodeZImageOmni": { + "display_name": "TextEncodeZImageOmni", + "inputs": { + "auto_resize_images": { + "name": "تغییر اندازه خودکار تصاویر" + }, + "clip": { + "name": "clip" + }, + "image1": { + "name": "تصویر ۱" + }, + "image2": { + "name": "تصویر ۲" + }, + "image3": { + "name": "تصویر ۳" + }, + "image_encoder": { + "name": "رمزگذار تصویر" + }, + "prompt": { + "name": "پرامپت" + }, + "vae": { + "name": "vae" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, "TextToLowercase": { "display_name": "تبدیل متن به حروف کوچک", "inputs": { @@ -16156,6 +16264,43 @@ } } }, + "WavespeedFlashVSRNode": { + "description": "افزایش‌دهنده سریع و با کیفیت ویدیو که وضوح را افزایش داده و شفافیت را برای ویدیوهای کم‌کیفیت یا تار بازمی‌گرداند.", + "display_name": "افزایش کیفیت ویدیو FlashVSR", + "inputs": { + "target_resolution": { + "name": "وضوح هدف" + }, + "video": { + "name": "ویدیو" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, + "WavespeedImageUpscaleNode": { + "description": "افزایش وضوح و کیفیت تصویر، ارتقاء عکس‌ها به ۴K یا ۸K برای نتایج شفاف و با جزئیات.", + "display_name": "افزایش کیفیت تصویر WaveSpeed", + "inputs": { + "image": { + "name": "تصویر" + }, + "model": { + "name": "مدل" + }, + "target_resolution": { + "name": "وضوح هدف" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, "WebcamCapture": { "display_name": "دریافت از وب‌کم", "inputs": { diff --git a/src/locales/fa/settings.json b/src/locales/fa/settings.json index 68bbbc70d..58760c376 100644 --- a/src/locales/fa/settings.json +++ b/src/locales/fa/settings.json @@ -332,6 +332,10 @@ "name": "اندازه تاریخچه صف", "tooltip": "حداکثر تعداد taskهایی که در تاریخچه صف نمایش داده می‌شوند." }, + "Comfy_Queue_QPOV2": { + "name": "استفاده از صف کار یکپارچه در پنل کناری دارایی‌ها", + "tooltip": "پنل شناور صف کار را با صف کاری معادل که در پنل کناری دارایی‌ها قرار دارد جایگزین می‌کند. می‌توانید این گزینه را غیرفعال کنید تا به چیدمان پنل شناور بازگردید." + }, "Comfy_Sidebar_Location": { "name": "محل نوار کناری", "options": { diff --git a/src/locales/fr/main.json b/src/locales/fr/main.json index 014f2ea0e..e86e9a806 100644 --- a/src/locales/fr/main.json +++ b/src/locales/fr/main.json @@ -238,6 +238,12 @@ "title": "Créer un compte" } }, + "boundingBox": { + "height": "Hauteur", + "width": "Largeur", + "x": "X", + "y": "Y" + }, "breadcrumbsMenu": { "clearWorkflow": "Effacer le workflow", "deleteBlueprint": "Supprimer le plan", @@ -811,6 +817,7 @@ "nodeSlotsError": "Erreur d'emplacements du nœud", "nodeWidgetsError": "Erreur de widgets du nœud", "nodes": "Nœuds", + "nodesCount": "{count} nœuds | {count} nœud | {count} nœuds", "nodesRunning": "nœuds en cours d’exécution", "none": "Aucun", "nothingToCopy": "Rien à copier", @@ -982,6 +989,11 @@ "imageCompare": { "noImages": "Aucune image à comparer" }, + "imageCrop": { + "cropPreviewAlt": "Aperçu du recadrage", + "loading": "Chargement...", + "noInputImage": "Aucune image d'entrée connectée" + }, "importFailed": { "copyError": "Erreur de copie", "title": "Échec de l’importation" @@ -1611,6 +1623,7 @@ "3d": "3d", "3d_models": "modèles_3d", "BFL": "BFL", + "Bria": "Bria", "ByteDance": "ByteDance", "Gemini": "Gemini", "Ideogram": "Ideogram", @@ -1632,6 +1645,7 @@ "Veo": "Veo", "Vidu": "Vidu", "Wan": "Wan", + "WaveSpeed": "WaveSpeed", "_for_testing": "_pour_test", "advanced": "avancé", "animation": "animation", diff --git a/src/locales/fr/nodeDefs.json b/src/locales/fr/nodeDefs.json index f7c51cde4..a516e4faa 100644 --- a/src/locales/fr/nodeDefs.json +++ b/src/locales/fr/nodeDefs.json @@ -328,6 +328,68 @@ } } }, + "BriaImageEditNode": { + "description": "Modifiez des images en utilisant le dernier modèle Bria", + "display_name": "Bria Image Edit", + "inputs": { + "control_after_generate": { + "name": "contrôle après génération" + }, + "guidance_scale": { + "name": "échelle de guidage", + "tooltip": "Une valeur plus élevée fait suivre l'image à l'invite de façon plus précise." + }, + "image": { + "name": "image" + }, + "mask": { + "name": "masque", + "tooltip": "Si omis, la modification s'applique à l'image entière." + }, + "model": { + "name": "modèle" + }, + "moderation": { + "name": "modération", + "tooltip": "Paramètres de modération" + }, + "moderation_prompt_content_moderation": { + "name": "modération_du_contenu_de_l'invite" + }, + "moderation_visual_input_moderation": { + "name": "modération_de_l'entrée_visuelle" + }, + "moderation_visual_output_moderation": { + "name": "modération_de_la_sortie_visuelle" + }, + "negative_prompt": { + "name": "invite négative" + }, + "prompt": { + "name": "invite", + "tooltip": "Instruction pour modifier l'image" + }, + "seed": { + "name": "graine" + }, + "steps": { + "name": "étapes" + }, + "structured_prompt": { + "name": "invite structurée", + "tooltip": "Une chaîne contenant l'invite d'édition structurée au format JSON. Utilisez ceci à la place de l'invite habituelle pour un contrôle précis et programmatique." + } + }, + "outputs": { + "0": { + "tooltip": null + }, + "1": { + "name": "invite structurée", + "tooltip": null + } + } + }, "ByteDanceFirstLastFrameNode": { "description": "Générer une vidéo en utilisant l'invite et les première et dernière images.", "display_name": "ByteDance Première-Dernière Image vers Vidéo", @@ -351,6 +413,10 @@ "name": "première_image", "tooltip": "Première image à utiliser pour la vidéo." }, + "generate_audio": { + "name": "générer_audio", + "tooltip": "Ce paramètre est ignoré pour tout modèle sauf seedance-1-5-pro." + }, "last_frame": { "name": "dernière_image", "tooltip": "Dernière image à utiliser pour la vidéo." @@ -527,6 +593,10 @@ "name": "durée", "tooltip": "La durée de la vidéo en sortie en secondes." }, + "generate_audio": { + "name": "générer_audio", + "tooltip": "Ce paramètre est ignoré pour tout modèle sauf seedance-1-5-pro." + }, "image": { "name": "image", "tooltip": "Première image à utiliser pour la vidéo." @@ -634,6 +704,10 @@ "name": "duration", "tooltip": "La durée de la vidéo de sortie en secondes." }, + "generate_audio": { + "name": "générer_audio", + "tooltip": "Ce paramètre est ignoré pour tout modèle sauf seedance-1-5-pro." + }, "model": { "name": "model" }, @@ -13438,6 +13512,40 @@ } } }, + "TextEncodeZImageOmni": { + "display_name": "TextEncodeZImageOmni", + "inputs": { + "auto_resize_images": { + "name": "redimensionnement automatique des images" + }, + "clip": { + "name": "clip" + }, + "image1": { + "name": "image1" + }, + "image2": { + "name": "image2" + }, + "image3": { + "name": "image3" + }, + "image_encoder": { + "name": "encodeur d'image" + }, + "prompt": { + "name": "invite" + }, + "vae": { + "name": "vae" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, "TextToLowercase": { "display_name": "Texte en minuscules", "inputs": { @@ -16125,6 +16233,43 @@ } } }, + "WavespeedFlashVSRNode": { + "description": "Upscaler vidéo rapide et de haute qualité qui augmente la résolution et restaure la clarté des séquences basse résolution ou floues.", + "display_name": "FlashVSR Upscale Vidéo", + "inputs": { + "target_resolution": { + "name": "résolution cible" + }, + "video": { + "name": "vidéo" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, + "WavespeedImageUpscaleNode": { + "description": "Augmentez la résolution et la qualité de l'image, en upscalant les photos en 4K ou 8K pour des résultats nets et détaillés.", + "display_name": "WaveSpeed Upscale Image", + "inputs": { + "image": { + "name": "image" + }, + "model": { + "name": "modèle" + }, + "target_resolution": { + "name": "résolution cible" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, "WebcamCapture": { "display_name": "Capture Webcam", "inputs": { diff --git a/src/locales/fr/settings.json b/src/locales/fr/settings.json index 3f5b6d01b..b69f8f20a 100644 --- a/src/locales/fr/settings.json +++ b/src/locales/fr/settings.json @@ -332,6 +332,10 @@ "name": "Taille de l'historique de la file d'attente", "tooltip": "Le nombre maximum de tâches qui s'affichent dans l'historique de la file d'attente." }, + "Comfy_Queue_QPOV2": { + "name": "Utiliser la file d’attente unifiée dans le panneau latéral des ressources", + "tooltip": "Remplace le panneau flottant de la file d’attente des tâches par une file d’attente équivalente intégrée dans le panneau latéral des ressources. Vous pouvez désactiver cette option pour revenir à la disposition du panneau flottant." + }, "Comfy_Sidebar_Location": { "name": "Emplacement de la barre latérale", "options": { diff --git a/src/locales/ja/main.json b/src/locales/ja/main.json index 7791475f5..6574446c7 100644 --- a/src/locales/ja/main.json +++ b/src/locales/ja/main.json @@ -238,6 +238,12 @@ "title": "アカウントを作成する" } }, + "boundingBox": { + "height": "高さ", + "width": "幅", + "x": "X", + "y": "Y" + }, "breadcrumbsMenu": { "clearWorkflow": "ワークフローをクリア", "deleteBlueprint": "ブループリントを削除", @@ -811,6 +817,7 @@ "nodeSlotsError": "ノードスロットエラー", "nodeWidgetsError": "ノードウィジェットエラー", "nodes": "ノード", + "nodesCount": "{count} ノード | {count} ノード | {count} ノード", "nodesRunning": "ノードが実行中", "none": "なし", "nothingToCopy": "コピーするものがありません", @@ -982,6 +989,11 @@ "imageCompare": { "noImages": "比較する画像がありません" }, + "imageCrop": { + "cropPreviewAlt": "切り抜きプレビュー", + "loading": "読み込み中...", + "noInputImage": "入力画像が接続されていません" + }, "importFailed": { "copyError": "コピーエラー", "title": "インポート失敗" @@ -1611,6 +1623,7 @@ "3d": "3d", "3d_models": "3Dモデル", "BFL": "BFL", + "Bria": "Bria", "ByteDance": "ByteDance", "Gemini": "Gemini", "Ideogram": "Ideogram", @@ -1632,6 +1645,7 @@ "Veo": "Veo", "Vidu": "Vidu", "Wan": "Wan", + "WaveSpeed": "WaveSpeed", "_for_testing": "_テスト用", "advanced": "高度な機能", "animation": "アニメーション", diff --git a/src/locales/ja/nodeDefs.json b/src/locales/ja/nodeDefs.json index 2471197e8..8fced2f75 100644 --- a/src/locales/ja/nodeDefs.json +++ b/src/locales/ja/nodeDefs.json @@ -328,6 +328,68 @@ } } }, + "BriaImageEditNode": { + "description": "Briaの最新モデルを使って画像を編集します", + "display_name": "Bria画像編集", + "inputs": { + "control_after_generate": { + "name": "生成後コントロール" + }, + "guidance_scale": { + "name": "ガイダンススケール", + "tooltip": "値が高いほどプロンプトに忠実な画像になります。" + }, + "image": { + "name": "画像" + }, + "mask": { + "name": "マスク", + "tooltip": "省略した場合、編集は画像全体に適用されます。" + }, + "model": { + "name": "model" + }, + "moderation": { + "name": "モデレーション", + "tooltip": "モデレーション設定" + }, + "moderation_prompt_content_moderation": { + "name": "プロンプト内容モデレーション" + }, + "moderation_visual_input_moderation": { + "name": "入力画像モデレーション" + }, + "moderation_visual_output_moderation": { + "name": "出力画像モデレーション" + }, + "negative_prompt": { + "name": "ネガティブプロンプト" + }, + "prompt": { + "name": "プロンプト", + "tooltip": "画像編集の指示" + }, + "seed": { + "name": "シード" + }, + "steps": { + "name": "ステップ数" + }, + "structured_prompt": { + "name": "構造化プロンプト", + "tooltip": "JSON形式の構造化編集プロンプトを含む文字列。より正確でプログラム的な制御が必要な場合は通常のプロンプトの代わりに使用してください。" + } + }, + "outputs": { + "0": { + "tooltip": null + }, + "1": { + "name": "構造化プロンプト", + "tooltip": null + } + } + }, "ByteDanceFirstLastFrameNode": { "description": "プロンプトと最初・最後のフレームを使用して動画を生成します。", "display_name": "ByteDance 最初-最後フレームから動画生成", @@ -351,6 +413,10 @@ "name": "最初のフレーム", "tooltip": "動画に使用する最初のフレーム。" }, + "generate_audio": { + "name": "generate_audio", + "tooltip": "このパラメータは、seedance-1-5-pro 以外のモデルでは無視されます。" + }, "last_frame": { "name": "最後のフレーム", "tooltip": "動画に使用する最後のフレーム。" @@ -527,6 +593,10 @@ "name": "duration", "tooltip": "出力動画の長さ（秒単位）。" }, + "generate_audio": { + "name": "generate_audio", + "tooltip": "このパラメータは、seedance-1-5-pro 以外のモデルでは無視されます。" + }, "image": { "name": "image", "tooltip": "動画の最初のフレームとして使用する画像。" @@ -634,6 +704,10 @@ "name": "長さ", "tooltip": "出力動画の長さ（秒単位）。" }, + "generate_audio": { + "name": "generate_audio", + "tooltip": "このパラメータは、seedance-1-5-pro 以外のモデルでは無視されます。" + }, "model": { "name": "モデル" }, @@ -13438,6 +13512,40 @@ } } }, + "TextEncodeZImageOmni": { + "display_name": "TextEncodeZImageOmni", + "inputs": { + "auto_resize_images": { + "name": "画像自動リサイズ" + }, + "clip": { + "name": "clip" + }, + "image1": { + "name": "画像1" + }, + "image2": { + "name": "画像2" + }, + "image3": { + "name": "画像3" + }, + "image_encoder": { + "name": "画像エンコーダ" + }, + "prompt": { + "name": "プロンプト" + }, + "vae": { + "name": "vae" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, "TextToLowercase": { "display_name": "テキストを小文字に変換", "inputs": { @@ -16125,6 +16233,43 @@ } } }, + "WavespeedFlashVSRNode": { + "description": "低解像度やぼやけた映像の解像度を向上させ、鮮明さを復元する高速・高品質なビデオアップスケーラーです。", + "display_name": "FlashVSRビデオ高解像度化", + "inputs": { + "target_resolution": { + "name": "目標解像度" + }, + "video": { + "name": "ビデオ" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, + "WavespeedImageUpscaleNode": { + "description": "画像の解像度と品質を向上させ、写真を4Kや8Kにアップスケールしてシャープで詳細な結果を得られます。", + "display_name": "WaveSpeed画像高解像度化", + "inputs": { + "image": { + "name": "画像" + }, + "model": { + "name": "model" + }, + "target_resolution": { + "name": "目標解像度" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, "WebcamCapture": { "display_name": "ウェブカメラキャプチャ", "inputs": { diff --git a/src/locales/ja/settings.json b/src/locales/ja/settings.json index 02559179b..3b60db826 100644 --- a/src/locales/ja/settings.json +++ b/src/locales/ja/settings.json @@ -332,6 +332,10 @@ "name": "キュー履歴サイズ", "tooltip": "キュー履歴に表示されるタスクの最大数。" }, + "Comfy_Queue_QPOV2": { + "name": "アセットサイドパネルで統一ジョブキューを使用", + "tooltip": "フローティングジョブキューパネルを、アセットサイドパネルに埋め込まれた同等のジョブキューに置き換えます。無効にすると、フローティングパネルのレイアウトに戻ります。" + }, "Comfy_Sidebar_Location": { "name": "サイドバーの位置", "options": { diff --git a/src/locales/ko/main.json b/src/locales/ko/main.json index 60b2f9711..c6949f5ae 100644 --- a/src/locales/ko/main.json +++ b/src/locales/ko/main.json @@ -238,6 +238,12 @@ "title": "계정 생성" } }, + "boundingBox": { + "height": "높이", + "width": "너비", + "x": "X", + "y": "Y" + }, "breadcrumbsMenu": { "clearWorkflow": "워크플로 내용 지우기", "deleteBlueprint": "블루프린트 삭제", @@ -811,6 +817,7 @@ "nodeSlotsError": "노드 슬롯 오류", "nodeWidgetsError": "노드 위젯 오류", "nodes": "노드", + "nodesCount": "{count}개 노드 | {count}개 노드 | {count}개 노드", "nodesRunning": "노드 실행 중", "none": "없음", "nothingToCopy": "복사할 항목 없음", @@ -982,6 +989,11 @@ "imageCompare": { "noImages": "비교할 이미지가 없습니다" }, + "imageCrop": { + "cropPreviewAlt": "자르기 미리보기", + "loading": "로딩 중...", + "noInputImage": "입력 이미지가 연결되지 않았습니다" + }, "importFailed": { "copyError": "복사 오류", "title": "가져오기 실패" @@ -1611,6 +1623,7 @@ "3d": "3d", "3d_models": "3D 모델", "BFL": "BFL", + "Bria": "Bria", "ByteDance": "ByteDance", "Gemini": "Gemini", "Ideogram": "Ideogram", @@ -1632,6 +1645,7 @@ "Veo": "Veo", "Vidu": "Vidu", "Wan": "Wan", + "WaveSpeed": "WaveSpeed", "_for_testing": "_테스트용", "advanced": "고급", "animation": "애니메이션", diff --git a/src/locales/ko/nodeDefs.json b/src/locales/ko/nodeDefs.json index e531b55dc..a89e934b4 100644 --- a/src/locales/ko/nodeDefs.json +++ b/src/locales/ko/nodeDefs.json @@ -328,6 +328,68 @@ } } }, + "BriaImageEditNode": { + "description": "Bria 최신 모델을 사용하여 이미지를 편집합니다", + "display_name": "Bria 이미지 편집", + "inputs": { + "control_after_generate": { + "name": "생성 후 제어" + }, + "guidance_scale": { + "name": "가이던스 스케일", + "tooltip": "값이 높을수록 프롬프트를 더 엄격하게 따릅니다." + }, + "image": { + "name": "image" + }, + "mask": { + "name": "마스크", + "tooltip": "생략하면 전체 이미지에 편집이 적용됩니다." + }, + "model": { + "name": "model" + }, + "moderation": { + "name": "모더레이션", + "tooltip": "모더레이션 설정" + }, + "moderation_prompt_content_moderation": { + "name": "프롬프트 콘텐츠 모더레이션" + }, + "moderation_visual_input_moderation": { + "name": "비주얼 입력 모더레이션" + }, + "moderation_visual_output_moderation": { + "name": "비주얼 출력 모더레이션" + }, + "negative_prompt": { + "name": "네거티브 프롬프트" + }, + "prompt": { + "name": "프롬프트", + "tooltip": "이미지 편집을 위한 지시문" + }, + "seed": { + "name": "시드" + }, + "steps": { + "name": "스텝" + }, + "structured_prompt": { + "name": "구조화된 프롬프트", + "tooltip": "JSON 형식의 구조화된 편집 프롬프트 문자열입니다. 더 정확하고 프로그래밍적으로 제어하려면 일반 프롬프트 대신 사용하세요." + } + }, + "outputs": { + "0": { + "tooltip": null + }, + "1": { + "name": "구조화된 프롬프트", + "tooltip": null + } + } + }, "ByteDanceFirstLastFrameNode": { "description": "프롬프트와 첫 번째 및 마지막 프레임을 사용하여 비디오를 생성합니다.", "display_name": "ByteDance 첫-마지막-프레임에서 비디오 생성", @@ -351,6 +413,10 @@ "name": "first_frame", "tooltip": "비디오에 사용될 첫 번째 프레임입니다." }, + "generate_audio": { + "name": "generate_audio", + "tooltip": "이 매개변수는 seedance-1-5-pro 모델을 제외한 모든 모델에서 무시됩니다." + }, "last_frame": { "name": "last_frame", "tooltip": "비디오에 사용될 마지막 프레임입니다." @@ -527,6 +593,10 @@ "name": "지속 시간", "tooltip": "출력 비디오의 지속 시간(초)입니다." }, + "generate_audio": { + "name": "generate_audio", + "tooltip": "이 매개변수는 seedance-1-5-pro 모델을 제외한 모든 모델에서 무시됩니다." + }, "image": { "name": "이미지", "tooltip": "비디오에 사용할 첫 번째 프레임입니다." @@ -634,6 +704,10 @@ "name": "duration", "tooltip": "출력 비디오의 지속 시간(초)입니다." }, + "generate_audio": { + "name": "generate_audio", + "tooltip": "이 매개변수는 seedance-1-5-pro 모델을 제외한 모든 모델에서 무시됩니다." + }, "model": { "name": "model" }, @@ -13438,6 +13512,40 @@ } } }, + "TextEncodeZImageOmni": { + "display_name": "TextEncodeZImageOmni", + "inputs": { + "auto_resize_images": { + "name": "이미지 자동 크기 조정" + }, + "clip": { + "name": "clip" + }, + "image1": { + "name": "이미지1" + }, + "image2": { + "name": "이미지2" + }, + "image3": { + "name": "이미지3" + }, + "image_encoder": { + "name": "이미지 인코더" + }, + "prompt": { + "name": "프롬프트" + }, + "vae": { + "name": "vae" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, "TextToLowercase": { "display_name": "텍스트 소문자 변환", "inputs": { @@ -16125,6 +16233,43 @@ } } }, + "WavespeedFlashVSRNode": { + "description": "저해상도 또는 흐릿한 영상의 해상도를 높이고 선명도를 복원하는 빠르고 고품질의 비디오 업스케일러입니다.", + "display_name": "FlashVSR 비디오 업스케일", + "inputs": { + "target_resolution": { + "name": "목표 해상도" + }, + "video": { + "name": "비디오" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, + "WavespeedImageUpscaleNode": { + "description": "이미지 해상도와 품질을 높여 사진을 4K 또는 8K로 업스케일하여 선명하고 디테일한 결과를 제공합니다.", + "display_name": "WaveSpeed 이미지 업스케일", + "inputs": { + "image": { + "name": "image" + }, + "model": { + "name": "model" + }, + "target_resolution": { + "name": "목표 해상도" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, "WebcamCapture": { "display_name": "웹캠 캡처", "inputs": { diff --git a/src/locales/ko/settings.json b/src/locales/ko/settings.json index 415d742b8..176c4afed 100644 --- a/src/locales/ko/settings.json +++ b/src/locales/ko/settings.json @@ -332,6 +332,10 @@ "name": "실행 큐 기록 갯수", "tooltip": "실행 큐 기록에 표시되는 최대 작업 수입니다." }, + "Comfy_Queue_QPOV2": { + "name": "에셋 사이드 패널에서 통합 작업 큐 사용", + "tooltip": "떠다니는 작업 큐 패널을 에셋 사이드 패널에 내장된 동등한 작업 큐로 대체합니다. 이 옵션을 비활성화하면 기존의 떠다니는 패널 레이아웃으로 돌아갈 수 있습니다." + }, "Comfy_Sidebar_Location": { "name": "사이드바 위치", "options": { diff --git a/src/locales/pt-BR/main.json b/src/locales/pt-BR/main.json index 160f525f5..db6950aa6 100644 --- a/src/locales/pt-BR/main.json +++ b/src/locales/pt-BR/main.json @@ -238,6 +238,12 @@ "title": "Criar uma conta" } }, + "boundingBox": { + "height": "Altura", + "width": "Largura", + "x": "X", + "y": "Y" + }, "breadcrumbsMenu": { "clearWorkflow": "Limpar Fluxo de Trabalho", "deleteBlueprint": "Excluir Blueprint", @@ -811,6 +817,7 @@ "nodeSlotsError": "Erro nos slots do nó", "nodeWidgetsError": "Erro nos widgets do nó", "nodes": "Nós", + "nodesCount": "{count} nós | {count} nó | {count} nós", "nodesRunning": "nós em execução", "none": "Nenhum", "nothingToCopy": "Nada para copiar", @@ -982,6 +989,11 @@ "imageCompare": { "noImages": "Nenhuma imagem para comparar" }, + "imageCrop": { + "cropPreviewAlt": "Pré-visualização do recorte", + "loading": "Carregando...", + "noInputImage": "Nenhuma imagem de entrada conectada" + }, "importFailed": { "copyError": "Erro ao Copiar", "title": "Falha na Importação" @@ -1611,6 +1623,7 @@ "3d": "3d", "3d_models": "modelos_3d", "BFL": "BFL", + "Bria": "Bria", "ByteDance": "ByteDance", "Gemini": "Gemini", "Ideogram": "Ideogram", @@ -1632,6 +1645,7 @@ "Veo": "Veo", "Vidu": "Vidu", "Wan": "Wan", + "WaveSpeed": "WaveSpeed", "_for_testing": "_for_testing", "advanced": "avançado", "animation": "animação", diff --git a/src/locales/pt-BR/nodeDefs.json b/src/locales/pt-BR/nodeDefs.json index 410528631..0b57b6691 100644 --- a/src/locales/pt-BR/nodeDefs.json +++ b/src/locales/pt-BR/nodeDefs.json @@ -328,6 +328,68 @@ } } }, + "BriaImageEditNode": { + "description": "Edite imagens usando o modelo mais recente da Bria", + "display_name": "Bria Image Edit", + "inputs": { + "control_after_generate": { + "name": "controle após gerar" + }, + "guidance_scale": { + "name": "escala_de_guia", + "tooltip": "Um valor mais alto faz com que a imagem siga o prompt mais de perto." + }, + "image": { + "name": "imagem" + }, + "mask": { + "name": "máscara", + "tooltip": "Se omitido, a edição será aplicada à imagem inteira." + }, + "model": { + "name": "modelo" + }, + "moderation": { + "name": "moderação", + "tooltip": "Configurações de moderação" + }, + "moderation_prompt_content_moderation": { + "name": "moderação_do_conteúdo_do_prompt" + }, + "moderation_visual_input_moderation": { + "name": "moderação_da_entrada_visual" + }, + "moderation_visual_output_moderation": { + "name": "moderação_da_saida_visual" + }, + "negative_prompt": { + "name": "prompt_negativo" + }, + "prompt": { + "name": "prompt", + "tooltip": "Instrução para editar a imagem" + }, + "seed": { + "name": "semente" + }, + "steps": { + "name": "passos" + }, + "structured_prompt": { + "name": "prompt_estruturado", + "tooltip": "Uma string contendo o prompt de edição estruturado em formato JSON. Use isso em vez do prompt comum para controle preciso e programático." + } + }, + "outputs": { + "0": { + "tooltip": null + }, + "1": { + "name": "prompt_estruturado", + "tooltip": null + } + } + }, "ByteDanceFirstLastFrameNode": { "description": "Gere vídeo usando um prompt e os quadros inicial e final.", "display_name": "ByteDance Primeiro-Último-Frame para Vídeo", @@ -351,6 +413,10 @@ "name": "first_frame", "tooltip": "Primeiro quadro a ser usado para o vídeo." }, + "generate_audio": { + "name": "generate_audio", + "tooltip": "Este parâmetro é ignorado para qualquer modelo, exceto seedance-1-5-pro." + }, "last_frame": { "name": "last_frame", "tooltip": "Último quadro a ser usado para o vídeo." @@ -527,6 +593,10 @@ "name": "duração", "tooltip": "A duração do vídeo de saída em segundos." }, + "generate_audio": { + "name": "generate_audio", + "tooltip": "Este parâmetro é ignorado para qualquer modelo, exceto seedance-1-5-pro." + }, "image": { "name": "imagem", "tooltip": "Primeiro quadro a ser usado para o vídeo." @@ -634,6 +704,10 @@ "name": "duration", "tooltip": "A duração do vídeo de saída em segundos." }, + "generate_audio": { + "name": "generate_audio", + "tooltip": "Este parâmetro é ignorado para qualquer modelo, exceto seedance-1-5-pro." + }, "model": { "name": "model" }, @@ -13465,6 +13539,40 @@ } } }, + "TextEncodeZImageOmni": { + "display_name": "TextEncodeZImageOmni", + "inputs": { + "auto_resize_images": { + "name": "redimensionar_imagens_automaticamente" + }, + "clip": { + "name": "clip" + }, + "image1": { + "name": "imagem1" + }, + "image2": { + "name": "imagem2" + }, + "image3": { + "name": "imagem3" + }, + "image_encoder": { + "name": "codificador_de_imagem" + }, + "prompt": { + "name": "prompt" + }, + "vae": { + "name": "vae" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, "TextToLowercase": { "display_name": "Texto para minúsculas", "inputs": { @@ -16156,6 +16264,43 @@ } } }, + "WavespeedFlashVSRNode": { + "description": "Aprimorador de vídeo rápido e de alta qualidade que aumenta a resolução e restaura a nitidez de vídeos de baixa resolução ou borrados.", + "display_name": "FlashVSR Video Upscale", + "inputs": { + "target_resolution": { + "name": "resolução_alvo" + }, + "video": { + "name": "vídeo" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, + "WavespeedImageUpscaleNode": { + "description": "Aumente a resolução e a qualidade da imagem, ampliando fotos para 4K ou 8K para resultados nítidos e detalhados.", + "display_name": "WaveSpeed Image Upscale", + "inputs": { + "image": { + "name": "imagem" + }, + "model": { + "name": "modelo" + }, + "target_resolution": { + "name": "resolução_alvo" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, "WebcamCapture": { "display_name": "Captura da Webcam", "inputs": { diff --git a/src/locales/pt-BR/settings.json b/src/locales/pt-BR/settings.json index ec7108ca2..0de32678b 100644 --- a/src/locales/pt-BR/settings.json +++ b/src/locales/pt-BR/settings.json @@ -332,6 +332,10 @@ "name": "Tamanho do histórico da fila", "tooltip": "O número máximo de tarefas exibidas no histórico da fila." }, + "Comfy_Queue_QPOV2": { + "name": "Usar a fila de tarefas unificada no painel lateral de Assets", + "tooltip": "Substitui o painel flutuante de fila de tarefas por uma fila de tarefas equivalente incorporada ao painel lateral de Assets. Você pode desativar isso para voltar ao layout do painel flutuante." + }, "Comfy_Sidebar_Location": { "name": "Localização da barra lateral", "options": { diff --git a/src/locales/ru/main.json b/src/locales/ru/main.json index 60155d334..5f9a65bea 100644 --- a/src/locales/ru/main.json +++ b/src/locales/ru/main.json @@ -238,6 +238,12 @@ "title": "Создать аккаунт" } }, + "boundingBox": { + "height": "Высота", + "width": "Ширина", + "x": "X", + "y": "Y" + }, "breadcrumbsMenu": { "clearWorkflow": "Очистить рабочий процесс", "deleteBlueprint": "Удалить схему", @@ -811,6 +817,7 @@ "nodeSlotsError": "Ошибка слотов ноды", "nodeWidgetsError": "Ошибка виджетов ноды", "nodes": "Узлы", + "nodesCount": "{count} узлов | {count} узел | {count} узла", "nodesRunning": "запущено узлов", "none": "Нет", "nothingToCopy": "Нечего копировать", @@ -982,6 +989,11 @@ "imageCompare": { "noImages": "Нет изображений для сравнения" }, + "imageCrop": { + "cropPreviewAlt": "Предпросмотр обрезки", + "loading": "Загрузка...", + "noInputImage": "Входное изображение не подключено" + }, "importFailed": { "copyError": "Ошибка копирования", "title": "Ошибка импорта" @@ -1611,6 +1623,7 @@ "3d": "3d", "3d_models": "3d_модели", "BFL": "BFL", + "Bria": "Bria", "ByteDance": "ByteDance", "Gemini": "Gemini", "Ideogram": "Ideogram", @@ -1632,6 +1645,7 @@ "Veo": "Veo", "Vidu": "Vidu", "Wan": "Wan", + "WaveSpeed": "WaveSpeed", "_for_testing": "_для_тестирования", "advanced": "расширенный", "animation": "анимация", diff --git a/src/locales/ru/nodeDefs.json b/src/locales/ru/nodeDefs.json index e8c555f7e..ac2b74bec 100644 --- a/src/locales/ru/nodeDefs.json +++ b/src/locales/ru/nodeDefs.json @@ -328,6 +328,68 @@ } } }, + "BriaImageEditNode": { + "description": "Редактирование изображений с помощью новейшей модели Bria", + "display_name": "Bria Image Edit", + "inputs": { + "control_after_generate": { + "name": "контроль после генерации" + }, + "guidance_scale": { + "name": "guidance_scale", + "tooltip": "Большее значение заставляет изображение точнее следовать промпту." + }, + "image": { + "name": "изображение" + }, + "mask": { + "name": "маска", + "tooltip": "Если не указано, редактирование применяется ко всему изображению." + }, + "model": { + "name": "model" + }, + "moderation": { + "name": "модерация", + "tooltip": "Настройки модерации" + }, + "moderation_prompt_content_moderation": { + "name": "модерация_контента_промпта" + }, + "moderation_visual_input_moderation": { + "name": "модерация_визуального_входа" + }, + "moderation_visual_output_moderation": { + "name": "модерация_визуального_выхода" + }, + "negative_prompt": { + "name": "негативный_промпт" + }, + "prompt": { + "name": "промпт", + "tooltip": "Инструкция для редактирования изображения" + }, + "seed": { + "name": "seed" + }, + "steps": { + "name": "шаги" + }, + "structured_prompt": { + "name": "структурированный_промпт", + "tooltip": "Строка, содержащая структурированный промпт для редактирования в формате JSON. Используйте вместо обычного промпта для точного, программного управления." + } + }, + "outputs": { + "0": { + "tooltip": null + }, + "1": { + "name": "структурированный_промпт", + "tooltip": null + } + } + }, "ByteDanceFirstLastFrameNode": { "description": "Создать видео с использованием промпта и первого и последнего кадров.", "display_name": "ByteDance - Преобразование первого-последнего кадра в видео", @@ -351,6 +413,10 @@ "name": "first_frame", "tooltip": "Первый кадр, который будет использоваться для видео." }, + "generate_audio": { + "name": "generate_audio", + "tooltip": "Этот параметр игнорируется для всех моделей, кроме seedance-1-5-pro." + }, "last_frame": { "name": "last_frame", "tooltip": "Последний кадр, который будет использоваться для видео." @@ -527,6 +593,10 @@ "name": "duration", "tooltip": "Продолжительность видео в секундах." }, + "generate_audio": { + "name": "generate_audio", + "tooltip": "Этот параметр игнорируется для всех моделей, кроме seedance-1-5-pro." + }, "image": { "name": "image", "tooltip": "Первый кадр, который будет использоваться для видео." @@ -634,6 +704,10 @@ "name": "длительность", "tooltip": "Длительность выходного видео в секундах." }, + "generate_audio": { + "name": "generate_audio", + "tooltip": "Этот параметр игнорируется для всех моделей, кроме seedance-1-5-pro." + }, "model": { "name": "модель" }, @@ -13438,6 +13512,40 @@ } } }, + "TextEncodeZImageOmni": { + "display_name": "TextEncodeZImageOmni", + "inputs": { + "auto_resize_images": { + "name": "автоматическое_изменение_размера_изображений" + }, + "clip": { + "name": "clip" + }, + "image1": { + "name": "изображение1" + }, + "image2": { + "name": "изображение2" + }, + "image3": { + "name": "изображение3" + }, + "image_encoder": { + "name": "кодировщик_изображения" + }, + "prompt": { + "name": "промпт" + }, + "vae": { + "name": "vae" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, "TextToLowercase": { "display_name": "Преобразовать текст в нижний регистр", "inputs": { @@ -16125,6 +16233,43 @@ } } }, + "WavespeedFlashVSRNode": { + "description": "Быстрый и качественный апскейлер видео, повышающий разрешение и восстанавливающий чёткость для низкокачественных или размытых кадров.", + "display_name": "FlashVSR Видео Апскейл", + "inputs": { + "target_resolution": { + "name": "целевое_разрешение" + }, + "video": { + "name": "видео" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, + "WavespeedImageUpscaleNode": { + "description": "Увеличьте разрешение и качество изображения, апскейл фотографий до 4K или 8K для чётких и детализированных результатов.", + "display_name": "WaveSpeed Апскейл Изображения", + "inputs": { + "image": { + "name": "изображение" + }, + "model": { + "name": "model" + }, + "target_resolution": { + "name": "целевое_разрешение" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, "WebcamCapture": { "display_name": "Захват с веб-камеры", "inputs": { diff --git a/src/locales/ru/settings.json b/src/locales/ru/settings.json index 99f123856..9b7cbed29 100644 --- a/src/locales/ru/settings.json +++ b/src/locales/ru/settings.json @@ -332,6 +332,10 @@ "name": "Размер истории очереди", "tooltip": "Максимальное количество задач, отображаемых в истории очереди." }, + "Comfy_Queue_QPOV2": { + "name": "Использовать объединённую очередь заданий в боковой панели ресурсов", + "tooltip": "Заменяет плавающую панель очереди заданий на аналогичную очередь, встроенную в боковую панель ресурсов. Вы можете отключить эту опцию, чтобы вернуться к плавающей панели." + }, "Comfy_Sidebar_Location": { "name": "Расположение боковой панели", "options": { diff --git a/src/locales/tr/main.json b/src/locales/tr/main.json index 870cee220..5ecb5d9f1 100644 --- a/src/locales/tr/main.json +++ b/src/locales/tr/main.json @@ -238,6 +238,12 @@ "title": "Hesap oluşturun" } }, + "boundingBox": { + "height": "Yükseklik", + "width": "Genişlik", + "x": "X", + "y": "Y" + }, "breadcrumbsMenu": { "clearWorkflow": "İş Akışını Temizle", "deleteBlueprint": "Taslağı Sil", @@ -811,6 +817,7 @@ "nodeSlotsError": "Düğüm Yuva Hatası", "nodeWidgetsError": "Düğüm Widget Hatası", "nodes": "Düğümler", + "nodesCount": "{count} düğüm | {count} düğüm | {count} düğüm", "nodesRunning": "düğüm çalışıyor", "none": "Hiçbiri", "nothingToCopy": "Kopyalanacak bir şey yok", @@ -982,6 +989,11 @@ "imageCompare": { "noImages": "Karşılaştırılacak görsel yok" }, + "imageCrop": { + "cropPreviewAlt": "Kırpma önizlemesi", + "loading": "Yükleniyor...", + "noInputImage": "Bağlı giriş görseli yok" + }, "importFailed": { "copyError": "Kopyalama Hatası", "title": "İçe Aktarma Başarısız" @@ -1611,6 +1623,7 @@ "3d": "3d", "3d_models": "3d_modeller", "BFL": "BFL", + "Bria": "Bria", "ByteDance": "ByteDance", "Gemini": "Gemini", "Ideogram": "Ideogram", @@ -1632,6 +1645,7 @@ "Veo": "Veo", "Vidu": "Vidu", "Wan": "Wan", + "WaveSpeed": "WaveSpeed", "_for_testing": "_test_için", "advanced": "gelişmiş", "animation": "animasyon", diff --git a/src/locales/tr/nodeDefs.json b/src/locales/tr/nodeDefs.json index 33863da69..db80ec235 100644 --- a/src/locales/tr/nodeDefs.json +++ b/src/locales/tr/nodeDefs.json @@ -328,6 +328,68 @@ } } }, + "BriaImageEditNode": { + "description": "Bria'nın en son modeliyle görüntüleri düzenleyin", + "display_name": "Bria Görüntü Düzenleme", + "inputs": { + "control_after_generate": { + "name": "oluşturduktan sonra kontrol" + }, + "guidance_scale": { + "name": "yönlendirme_ölçeği", + "tooltip": "Daha yüksek değer, görüntünün isteme daha yakın olmasını sağlar." + }, + "image": { + "name": "görüntü" + }, + "mask": { + "name": "maske", + "tooltip": "Atlanırsa, düzenleme tüm görüntüye uygulanır." + }, + "model": { + "name": "model" + }, + "moderation": { + "name": "denetleme", + "tooltip": "Denetleme ayarları" + }, + "moderation_prompt_content_moderation": { + "name": "istem_içeriği_denetleme" + }, + "moderation_visual_input_moderation": { + "name": "görsel_girdi_denetleme" + }, + "moderation_visual_output_moderation": { + "name": "görsel_çıktı_denetleme" + }, + "negative_prompt": { + "name": "negatif_istem" + }, + "prompt": { + "name": "istem", + "tooltip": "Görüntüyü düzenlemek için talimat" + }, + "seed": { + "name": "tohum" + }, + "steps": { + "name": "adımlar" + }, + "structured_prompt": { + "name": "yapılandırılmış_istem", + "tooltip": "JSON formatında yapılandırılmış düzenleme istemi içeren bir dize. Hassas ve programatik kontrol için normal istem yerine bunu kullanın." + } + }, + "outputs": { + "0": { + "tooltip": null + }, + "1": { + "name": "yapılandırılmış_istem", + "tooltip": null + } + } + }, "ByteDanceFirstLastFrameNode": { "description": "İlk ve son kareleri kullanarak video oluşturun.", "display_name": "ByteDance İlk-Son-Kare'den Videoya", @@ -351,6 +413,10 @@ "name": "ilk_kare", "tooltip": "Video için kullanılacak ilk kare." }, + "generate_audio": { + "name": "ses_oluştur", + "tooltip": "Bu parametre, seedance-1-5-pro modeli dışında tüm modeller için yok sayılır." + }, "last_frame": { "name": "son_kare", "tooltip": "Video için kullanılacak son kare." @@ -527,6 +593,10 @@ "name": "süre", "tooltip": "Oluşturulan videonun saniye cinsinden süresi." }, + "generate_audio": { + "name": "ses_oluştur", + "tooltip": "Bu parametre, seedance-1-5-pro modeli dışında tüm modeller için yok sayılır." + }, "image": { "name": "görüntü", "tooltip": "Video için kullanılacak ilk kare." @@ -634,6 +704,10 @@ "name": "süre", "tooltip": "Çıktı videosunun saniye cinsinden süresi." }, + "generate_audio": { + "name": "ses_oluştur", + "tooltip": "Bu parametre, seedance-1-5-pro modeli dışında tüm modeller için yok sayılır." + }, "model": { "name": "model" }, @@ -13438,6 +13512,40 @@ } } }, + "TextEncodeZImageOmni": { + "display_name": "TextEncodeZImageOmni", + "inputs": { + "auto_resize_images": { + "name": "görüntüleri_otomatik_yeniden_boyutlandır" + }, + "clip": { + "name": "clip" + }, + "image1": { + "name": "görüntü1" + }, + "image2": { + "name": "görüntü2" + }, + "image3": { + "name": "görüntü3" + }, + "image_encoder": { + "name": "görüntü_kodlayıcı" + }, + "prompt": { + "name": "istem" + }, + "vae": { + "name": "vae" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, "TextToLowercase": { "display_name": "Metni Küçük Harfe Çevir", "inputs": { @@ -16125,6 +16233,43 @@ } } }, + "WavespeedFlashVSRNode": { + "description": "Düşük çözünürlüklü veya bulanık videolar için hızlı, yüksek kaliteli video yükseltici; çözünürlüğü artırır ve netliği geri kazandırır.", + "display_name": "FlashVSR Video Yükseltme", + "inputs": { + "target_resolution": { + "name": "hedef_çözünürlük" + }, + "video": { + "name": "video" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, + "WavespeedImageUpscaleNode": { + "description": "Görüntü çözünürlüğünü ve kalitesini artırın, fotoğrafları keskin ve ayrıntılı sonuçlar için 4K veya 8K'ya yükseltin.", + "display_name": "WaveSpeed Görüntü Yükseltme", + "inputs": { + "image": { + "name": "görüntü" + }, + "model": { + "name": "model" + }, + "target_resolution": { + "name": "hedef_çözünürlük" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, "WebcamCapture": { "display_name": "Webcam Yakalama", "inputs": { diff --git a/src/locales/tr/settings.json b/src/locales/tr/settings.json index 6cf098949..6d24897f4 100644 --- a/src/locales/tr/settings.json +++ b/src/locales/tr/settings.json @@ -332,6 +332,10 @@ "name": "Kuyruk geçmişi boyutu", "tooltip": "Kuyruk geçmişinde gösterilen maksimum görev sayısı." }, + "Comfy_Queue_QPOV2": { + "name": "Varlıklar yan panelinde birleşik iş kuyruğunu kullan", + "tooltip": "Kayan iş kuyruğu panelini, Varlıklar yan paneline gömülü eşdeğer bir iş kuyruğu ile değiştirir. Kayan panel düzenine dönmek için bunu devre dışı bırakabilirsiniz." + }, "Comfy_Sidebar_Location": { "name": "Kenar çubuğu konumu", "options": { diff --git a/src/locales/zh-TW/main.json b/src/locales/zh-TW/main.json index 0a148681a..f63715f74 100644 --- a/src/locales/zh-TW/main.json +++ b/src/locales/zh-TW/main.json @@ -238,6 +238,12 @@ "title": "建立帳戶" } }, + "boundingBox": { + "height": "高度", + "width": "寬度", + "x": "X", + "y": "Y" + }, "breadcrumbsMenu": { "clearWorkflow": "清除工作流程", "deleteBlueprint": "刪除藍圖", @@ -811,6 +817,7 @@ "nodeSlotsError": "節點插槽錯誤", "nodeWidgetsError": "節點小工具錯誤", "nodes": "節點", + "nodesCount": "{count} 個節點 | {count} 個節點 | {count} 個節點", "nodesRunning": "節點執行中", "none": "無", "nothingToCopy": "沒有可複製的項目", @@ -982,6 +989,11 @@ "imageCompare": { "noImages": "沒有可比較的圖像" }, + "imageCrop": { + "cropPreviewAlt": "裁切預覽", + "loading": "載入中...", + "noInputImage": "未連接輸入影像" + }, "importFailed": { "copyError": "複製錯誤", "title": "匯入失敗" @@ -1611,6 +1623,7 @@ "3d": "3D", "3d_models": "3D 模型", "BFL": "BFL", + "Bria": "Bria", "ByteDance": "字節跳動", "Gemini": "雙子星", "Ideogram": "Ideogram", @@ -1632,6 +1645,7 @@ "Veo": "Veo", "Vidu": "維度", "Wan": "Wan", + "WaveSpeed": "WaveSpeed", "_for_testing": "_for_testing", "advanced": "進階", "animation": "動畫", diff --git a/src/locales/zh-TW/nodeDefs.json b/src/locales/zh-TW/nodeDefs.json index e281a7029..cfda5775c 100644 --- a/src/locales/zh-TW/nodeDefs.json +++ b/src/locales/zh-TW/nodeDefs.json @@ -328,6 +328,68 @@ } } }, + "BriaImageEditNode": { + "description": "使用 Bria 最新模型編輯圖像", + "display_name": "Bria 圖像編輯", + "inputs": { + "control_after_generate": { + "name": "生成後控制" + }, + "guidance_scale": { + "name": "指引強度", + "tooltip": "數值越高，圖像越貼合提示詞。" + }, + "image": { + "name": "圖像" + }, + "mask": { + "name": "遮罩", + "tooltip": "若未設定，編輯將套用至整張圖像。" + }, + "model": { + "name": "model" + }, + "moderation": { + "name": "審核", + "tooltip": "審核設定" + }, + "moderation_prompt_content_moderation": { + "name": "提示詞內容審核" + }, + "moderation_visual_input_moderation": { + "name": "輸入圖像審核" + }, + "moderation_visual_output_moderation": { + "name": "輸出圖像審核" + }, + "negative_prompt": { + "name": "負面提示詞" + }, + "prompt": { + "name": "提示詞", + "tooltip": "編輯圖像的指令" + }, + "seed": { + "name": "種子" + }, + "steps": { + "name": "步數" + }, + "structured_prompt": { + "name": "結構化提示詞", + "tooltip": "包含結構化編輯提示的 JSON 格式字串。若需精確、程式化控制，請使用此項取代一般提示詞。" + } + }, + "outputs": { + "0": { + "tooltip": null + }, + "1": { + "name": "結構化提示詞", + "tooltip": null + } + } + }, "ByteDanceFirstLastFrameNode": { "description": "使用提示詞和首尾幀生成影片。", "display_name": "字節跳動首尾幀轉影片", @@ -351,6 +413,10 @@ "name": "首幀", "tooltip": "用於影片的首幀。" }, + "generate_audio": { + "name": "generate_audio", + "tooltip": "此參數僅適用於 seedance-1-5-pro，其他模型將會忽略。" + }, "last_frame": { "name": "尾幀", "tooltip": "用於影片的尾幀。" @@ -527,6 +593,10 @@ "name": "duration", "tooltip": "輸出影片的持續時間（以秒為單位）。" }, + "generate_audio": { + "name": "generate_audio", + "tooltip": "此參數僅適用於 seedance-1-5-pro，其他模型將會忽略。" + }, "image": { "name": "image", "tooltip": "用於影片的第一幀圖片。" @@ -634,6 +704,10 @@ "name": "持續時間", "tooltip": "輸出影片的持續時間（秒）。" }, + "generate_audio": { + "name": "generate_audio", + "tooltip": "此參數僅適用於 seedance-1-5-pro，其他模型將會忽略。" + }, "model": { "name": "模型" }, @@ -13438,6 +13512,40 @@ } } }, + "TextEncodeZImageOmni": { + "display_name": "TextEncodeZImageOmni", + "inputs": { + "auto_resize_images": { + "name": "自動調整圖像尺寸" + }, + "clip": { + "name": "clip" + }, + "image1": { + "name": "圖像1" + }, + "image2": { + "name": "圖像2" + }, + "image3": { + "name": "圖像3" + }, + "image_encoder": { + "name": "圖像編碼器" + }, + "prompt": { + "name": "提示詞" + }, + "vae": { + "name": "vae" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, "TextToLowercase": { "display_name": "轉換為小寫", "inputs": { @@ -16125,6 +16233,43 @@ } } }, + "WavespeedFlashVSRNode": { + "description": "快速高品質影片升頻器，提升解析度並恢復低解析度或模糊影片的清晰度。", + "display_name": "FlashVSR 影片升頻", + "inputs": { + "target_resolution": { + "name": "目標解析度" + }, + "video": { + "name": "影片" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, + "WavespeedImageUpscaleNode": { + "description": "提升圖像解析度與品質，將照片升頻至 4K 或 8K，獲得銳利細緻的效果。", + "display_name": "WaveSpeed 圖像升頻", + "inputs": { + "image": { + "name": "圖像" + }, + "model": { + "name": "model" + }, + "target_resolution": { + "name": "目標解析度" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, "WebcamCapture": { "display_name": "網路攝影機擷取", "inputs": { diff --git a/src/locales/zh-TW/settings.json b/src/locales/zh-TW/settings.json index 060c8fe0e..8f769dc7b 100644 --- a/src/locales/zh-TW/settings.json +++ b/src/locales/zh-TW/settings.json @@ -332,6 +332,10 @@ "name": "佇列歷史記錄大小", "tooltip": "佇列歷史中顯示的最大任務數量。" }, + "Comfy_Queue_QPOV2": { + "name": "在資產側邊欄中使用統一任務佇列", + "tooltip": "將浮動任務佇列面板替換為嵌入資產側邊欄的等效任務佇列。您可以停用此選項以恢復浮動面板佈局。" + }, "Comfy_Sidebar_Location": { "name": "側邊欄位置", "options": { diff --git a/src/locales/zh/main.json b/src/locales/zh/main.json index 1108b1702..0cb976ecc 100644 --- a/src/locales/zh/main.json +++ b/src/locales/zh/main.json @@ -238,6 +238,12 @@ "title": "创建一个账户" } }, + "boundingBox": { + "height": "高度", + "width": "宽度", + "x": "X", + "y": "Y" + }, "breadcrumbsMenu": { "clearWorkflow": "清除工作流", "deleteBlueprint": "删除蓝图", @@ -811,6 +817,7 @@ "nodeSlotsError": "节点插槽错误", "nodeWidgetsError": "节点控件错误", "nodes": "节点", + "nodesCount": "{count} 个节点", "nodesRunning": "节点正在运行", "none": "无", "nothingToCopy": "没有可以复制的内容", @@ -982,6 +989,11 @@ "imageCompare": { "noImages": "没有可以对比的图像" }, + "imageCrop": { + "cropPreviewAlt": "裁剪预览", + "loading": "加载中...", + "noInputImage": "未连接输入图像" + }, "importFailed": { "copyError": "复制错误", "title": "导入失败" @@ -1611,6 +1623,7 @@ "3d": "3d", "3d_models": "3D模型", "BFL": "BFL", + "Bria": "Bria", "ByteDance": "字节跳动", "Gemini": "Gemini", "Ideogram": "Ideogram", @@ -1632,6 +1645,7 @@ "Veo": "Veo", "Vidu": "Vidu", "Wan": "Wan万相", + "WaveSpeed": "WaveSpeed", "_for_testing": "_用于测试", "advanced": "高级", "animation": "动画", diff --git a/src/locales/zh/nodeDefs.json b/src/locales/zh/nodeDefs.json index 868bf4b20..bb23fa593 100644 --- a/src/locales/zh/nodeDefs.json +++ b/src/locales/zh/nodeDefs.json @@ -328,6 +328,68 @@ } } }, + "BriaImageEditNode": { + "description": "使用 Bria 最新模型编辑图像", + "display_name": "Bria 图像编辑", + "inputs": { + "control_after_generate": { + "name": "control after generate" + }, + "guidance_scale": { + "name": "guidance_scale", + "tooltip": "数值越高，图像越贴合 prompt。" + }, + "image": { + "name": "image" + }, + "mask": { + "name": "mask", + "tooltip": "如未指定，编辑将应用于整个图像。" + }, + "model": { + "name": "model" + }, + "moderation": { + "name": "moderation", + "tooltip": "内容审核设置" + }, + "moderation_prompt_content_moderation": { + "name": "prompt_content_moderation" + }, + "moderation_visual_input_moderation": { + "name": "visual_input_moderation" + }, + "moderation_visual_output_moderation": { + "name": "visual_output_moderation" + }, + "negative_prompt": { + "name": "negative_prompt" + }, + "prompt": { + "name": "prompt", + "tooltip": "编辑图像的指令" + }, + "seed": { + "name": "seed" + }, + "steps": { + "name": "steps" + }, + "structured_prompt": { + "name": "structured_prompt", + "tooltip": "包含结构化编辑提示的 JSON 字符串。使用此项可实现更精确、可编程的控制，替代常规 prompt。" + } + }, + "outputs": { + "0": { + "tooltip": null + }, + "1": { + "name": "structured_prompt", + "tooltip": null + } + } + }, "ByteDanceFirstLastFrameNode": { "description": "使用提示词和首尾帧生成视频。", "display_name": "字节跳动首尾帧转视频", @@ -351,6 +413,10 @@ "name": "第一帧", "tooltip": "用于视频的第一帧。" }, + "generate_audio": { + "name": "generate_audio", + "tooltip": "此参数仅对 seedance-1-5-pro 模型有效，其他模型将被忽略。" + }, "last_frame": { "name": "最后一帧", "tooltip": "用于视频的最后一帧。" @@ -527,6 +593,10 @@ "name": "时长", "tooltip": "输出视频的时长（以秒为单位）。" }, + "generate_audio": { + "name": "generate_audio", + "tooltip": "此参数仅对 seedance-1-5-pro 模型有效，其他模型将被忽略。" + }, "image": { "name": "图片", "tooltip": "用于视频的第一帧。" @@ -634,6 +704,10 @@ "name": "时长", "tooltip": "输出视频的时长（秒）。" }, + "generate_audio": { + "name": "generate_audio", + "tooltip": "此参数仅对 seedance-1-5-pro 模型有效，其他模型将被忽略。" + }, "model": { "name": "模型" }, @@ -13465,6 +13539,40 @@ } } }, + "TextEncodeZImageOmni": { + "display_name": "TextEncodeZImageOmni", + "inputs": { + "auto_resize_images": { + "name": "auto_resize_images" + }, + "clip": { + "name": "clip" + }, + "image1": { + "name": "image1" + }, + "image2": { + "name": "image2" + }, + "image3": { + "name": "image3" + }, + "image_encoder": { + "name": "image_encoder" + }, + "prompt": { + "name": "prompt" + }, + "vae": { + "name": "vae" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, "TextToLowercase": { "display_name": "文本半角", "inputs": { @@ -16156,6 +16264,43 @@ } } }, + "WavespeedFlashVSRNode": { + "description": "快速高质量的视频超分辨率工具，可提升分辨率并恢复低分辨率或模糊视频的清晰度。", + "display_name": "FlashVSR 视频超分辨率", + "inputs": { + "target_resolution": { + "name": "target_resolution" + }, + "video": { + "name": "video" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, + "WavespeedImageUpscaleNode": { + "description": "提升图像分辨率和质量，将照片放大至 4K 或 8K，获得清晰细致的效果。", + "display_name": "WaveSpeed 图像超分辨率", + "inputs": { + "image": { + "name": "image" + }, + "model": { + "name": "model" + }, + "target_resolution": { + "name": "target_resolution" + } + }, + "outputs": { + "0": { + "tooltip": null + } + } + }, "WebcamCapture": { "display_name": "网络摄像头捕获", "inputs": { diff --git a/src/locales/zh/settings.json b/src/locales/zh/settings.json index cbde4cc8c..b7533899a 100644 --- a/src/locales/zh/settings.json +++ b/src/locales/zh/settings.json @@ -332,6 +332,10 @@ "name": "队列历史大小", "tooltip": "队列历史中显示的最大任务数量。" }, + "Comfy_Queue_QPOV2": { + "name": "在资源侧边栏中使用统一作业队列", + "tooltip": "将浮动作业队列面板替换为嵌入资源侧边栏的等效作业队列。您可以禁用此选项以恢复为浮动面板布局。" + }, "Comfy_Sidebar_Location": { "name": "侧边栏位置", "options": { diff --git a/src/platform/assets/components/Media3DTop.vue b/src/platform/assets/components/Media3DTop.vue index a4cc141db..b5b7f0c60 100644 --- a/src/platform/assets/components/Media3DTop.vue +++ b/src/platform/assets/components/Media3DTop.vue @@ -1,12 +1,35 @@ + + diff --git a/src/platform/assets/components/MediaAssetFilterBar.vue b/src/platform/assets/components/MediaAssetFilterBar.vue index 6a0fcdb93..6e4ec5e4c 100644 --- a/src/platform/assets/components/MediaAssetFilterBar.vue +++ b/src/platform/assets/components/MediaAssetFilterBar.vue @@ -1,40 +1,42 @@ diff --git a/src/platform/assets/composables/useMediaAssetActions.test.ts b/src/platform/assets/composables/useMediaAssetActions.test.ts new file mode 100644 index 000000000..ef7ccf8ee --- /dev/null +++ b/src/platform/assets/composables/useMediaAssetActions.test.ts @@ -0,0 +1,223 @@ +import { createPinia, setActivePinia } from 'pinia' +import { beforeEach, describe, expect, it, vi } from 'vitest' + +import type { LGraphNode } from '@/lib/litegraph/src/litegraph' +import type { AssetItem } from '@/platform/assets/schemas/assetSchema' + +// Use vi.hoisted to create a mutable reference for isCloud +const mockIsCloud = vi.hoisted(() => ({ value: false })) + +// Track the filename passed to createAnnotatedPath +const capturedFilenames = vi.hoisted(() => ({ values: [] as string[] })) + +vi.mock('@/platform/distribution/types', () => ({ + get isCloud() { + return mockIsCloud.value + } +})) + +vi.mock('primevue/usetoast', () => ({ + useToast: () => ({ + add: vi.fn() + }) +})) + +vi.mock('vue-i18n', () => ({ + useI18n: () => ({ + t: (key: string) => key + }), + createI18n: () => ({ + global: { + t: (key: string) => key + } + }) +})) + +vi.mock('@/stores/dialogStore', () => ({ + useDialogStore: () => ({ + showDialog: vi.fn() + }) +})) + +vi.mock('@/composables/useCopyToClipboard', () => ({ + useCopyToClipboard: () => ({ + copyToClipboard: vi.fn() + }) +})) + +vi.mock('@/platform/workflow/core/services/workflowActionsService', () => ({ + useWorkflowActionsService: () => ({ + openWorkflowAction: vi.fn(), + exportWorkflowAction: vi.fn() + }) +})) + +vi.mock('@/services/litegraphService', () => ({ + useLitegraphService: () => ({ + addNodeOnGraph: vi.fn().mockReturnValue({ + widgets: [{ name: 'image', value: '', callback: vi.fn() }], + graph: { setDirtyCanvas: vi.fn() } + } as unknown as LGraphNode), + getCanvasCenter: vi.fn().mockReturnValue([100, 100]) + }) +})) + +vi.mock('@/stores/nodeDefStore', () => ({ + useNodeDefStore: () => ({ + nodeDefsByName: { + LoadImage: { + name: 'LoadImage', + display_name: 'Load Image' + } + } + }) +})) + +vi.mock('@/utils/createAnnotatedPath', () => ({ + createAnnotatedPath: vi.fn((item: { filename: string }) => { + capturedFilenames.values.push(item.filename) + return item.filename + }) +})) + +vi.mock('@/utils/loaderNodeUtil', () => ({ + detectNodeTypeFromFilename: vi.fn().mockReturnValue({ + nodeType: 'LoadImage', + widgetName: 'image' + }) +})) + +vi.mock('@/utils/typeGuardUtil', () => ({ + isResultItemType: vi.fn().mockReturnValue(true) +})) + +vi.mock('@/platform/assets/utils/assetTypeUtil', () => ({ + getAssetType: vi.fn().mockReturnValue('input') +})) + +vi.mock('../schemas/assetMetadataSchema', () => ({ + getOutputAssetMetadata: vi.fn().mockReturnValue(null) +})) + +function createMockAsset(overrides: Partial = {}): AssetItem { + return { + id: 'test-asset-id', + name: 'original-name.jpeg', + size: 1024, + created_at: '2025-01-01T00:00:00Z', + tags: ['input'], + ...overrides + } +} + +describe('useMediaAssetActions', () => { + beforeEach(() => { + setActivePinia(createPinia()) + vi.clearAllMocks() + capturedFilenames.values = [] + mockIsCloud.value = false + }) + + describe('addWorkflow', () => { + describe('OSS mode (isCloud = false)', () => { + beforeEach(() => { + mockIsCloud.value = false + }) + + it('should use asset.name as filename', async () => { + const { useMediaAssetActions } = await import('./useMediaAssetActions') + const actions = useMediaAssetActions() + + const asset = createMockAsset({ + name: 'my-image.jpeg', + asset_hash: 'hash123.jpeg' + }) + + await actions.addWorkflow(asset) + + expect(capturedFilenames.values).toContain('my-image.jpeg') + }) + }) + + describe('Cloud mode (isCloud = true)', () => { + beforeEach(() => { + mockIsCloud.value = true + }) + + it('should use asset_hash as filename when available', async () => { + const { useMediaAssetActions } = await import('./useMediaAssetActions') + const actions = useMediaAssetActions() + + const asset = createMockAsset({ + name: 'original.jpeg', + asset_hash: 'abc123hash.jpeg' + }) + + await actions.addWorkflow(asset) + + expect(capturedFilenames.values).toContain('abc123hash.jpeg') + }) + + it('should fall back to asset.name when asset_hash is not available', async () => { + const { useMediaAssetActions } = await import('./useMediaAssetActions') + const actions = useMediaAssetActions() + + const asset = createMockAsset({ + name: 'fallback-name.jpeg', + asset_hash: undefined + }) + + await actions.addWorkflow(asset) + + expect(capturedFilenames.values).toContain('fallback-name.jpeg') + }) + + it('should fall back to asset.name when asset_hash is null', async () => { + const { useMediaAssetActions } = await import('./useMediaAssetActions') + const actions = useMediaAssetActions() + + const asset = createMockAsset({ + name: 'fallback-null.jpeg', + asset_hash: null + }) + + await actions.addWorkflow(asset) + + expect(capturedFilenames.values).toContain('fallback-null.jpeg') + }) + }) + }) + + describe('addMultipleToWorkflow', () => { + describe('Cloud mode (isCloud = true)', () => { + beforeEach(() => { + mockIsCloud.value = true + }) + + it('should use asset_hash for each asset', async () => { + const { useMediaAssetActions } = await import('./useMediaAssetActions') + const actions = useMediaAssetActions() + + const assets = [ + createMockAsset({ + id: '1', + name: 'file1.jpeg', + asset_hash: 'hash1.jpeg' + }), + createMockAsset({ + id: '2', + name: 'file2.jpeg', + asset_hash: 'hash2.jpeg' + }) + ] + + await actions.addMultipleToWorkflow(assets) + + expect(capturedFilenames.values).toContain('hash1.jpeg') + expect(capturedFilenames.values).toContain('hash2.jpeg') + expect(capturedFilenames.values).not.toContain('file1.jpeg') + expect(capturedFilenames.values).not.toContain('file2.jpeg') + }) + }) + }) +}) diff --git a/src/platform/assets/composables/useMediaAssetActions.ts b/src/platform/assets/composables/useMediaAssetActions.ts index 47991ee9e..98a9444ba 100644 --- a/src/platform/assets/composables/useMediaAssetActions.ts +++ b/src/platform/assets/composables/useMediaAssetActions.ts @@ -207,10 +207,17 @@ export function useMediaAssetActions() { const metadata = getOutputAssetMetadata(targetAsset.user_metadata) const assetType = getAssetType(targetAsset, 'input') + // In Cloud mode, use asset_hash (the actual stored filename) + // In OSS mode, use the original name + const filename = + isCloud && targetAsset.asset_hash + ? targetAsset.asset_hash + : targetAsset.name + // Create annotated path for the asset const annotated = createAnnotatedPath( { - filename: targetAsset.name, + filename, subfolder: metadata?.subfolder || '', type: isResultItemType(assetType) ? assetType : undefined }, @@ -342,9 +349,14 @@ export function useMediaAssetActions() { const metadata = getOutputAssetMetadata(asset.user_metadata) const assetType = getAssetType(asset, 'input') + // In Cloud mode, use asset_hash (the actual stored filename) + // In OSS mode, use the original name + const filename = + isCloud && asset.asset_hash ? asset.asset_hash : asset.name + const annotated = createAnnotatedPath( { - filename: asset.name, + filename, subfolder: metadata?.subfolder || '', type: isResultItemType(assetType) ? assetType : undefined }, diff --git a/src/platform/distribution/types.ts b/src/platform/distribution/types.ts index d03e6d53b..53ba95bea 100644 --- a/src/platform/distribution/types.ts +++ b/src/platform/distribution/types.ts @@ -9,6 +9,7 @@ type Distribution = 'desktop' | 'localhost' | 'cloud' declare global { const __DISTRIBUTION__: Distribution + const __IS_NIGHTLY__: boolean } /** Current distribution - replaced at compile time */ @@ -18,3 +19,10 @@ const DISTRIBUTION: Distribution = __DISTRIBUTION__ export const isDesktop = DISTRIBUTION === 'desktop' || isElectron() // TODO: replace with build var export const isCloud = DISTRIBUTION === 'cloud' // export const isLocalhost = DISTRIBUTION === 'localhost' || (!isDesktop && !isCloud) + +/** + * Whether this is a nightly build (from main branch). + * Nightly builds may show experimental features and surveys. + * @public + */ +export const isNightly = __IS_NIGHTLY__ diff --git a/src/platform/settings/constants/coreSettings.ts b/src/platform/settings/constants/coreSettings.ts index 33f656669..3b6a06879 100644 --- a/src/platform/settings/constants/coreSettings.ts +++ b/src/platform/settings/constants/coreSettings.ts @@ -1167,10 +1167,12 @@ export const CORE_SETTINGS: SettingParams[] = [ }, { id: 'Comfy.Queue.QPOV2', - name: 'Queue Panel V2', - type: 'hidden', - tooltip: 'Enable the new Assets Panel design with list/grid view toggle', - defaultValue: false, + category: ['Comfy', 'Queue', 'Layout'], + name: 'Use the unified job queue in the Assets side panel', + type: 'boolean', + tooltip: + 'Replaces the floating job queue panel with an equivalent job queue embedded in the Assets side panel. You can disable this to return to the floating panel layout.', + defaultValue: true, experimental: true } ] diff --git a/src/platform/surveys/useFeatureUsageTracker.test.ts b/src/platform/surveys/useFeatureUsageTracker.test.ts new file mode 100644 index 000000000..5313e9eaf --- /dev/null +++ b/src/platform/surveys/useFeatureUsageTracker.test.ts @@ -0,0 +1,131 @@ +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' + +const STORAGE_KEY = 'Comfy.FeatureUsage' + +describe('useFeatureUsageTracker', () => { + beforeEach(() => { + localStorage.clear() + vi.resetModules() + }) + + afterEach(() => { + localStorage.clear() + }) + + it('initializes with zero count for new feature', async () => { + const { useFeatureUsageTracker } = await import('./useFeatureUsageTracker') + const { useCount } = useFeatureUsageTracker('test-feature') + + expect(useCount.value).toBe(0) + }) + + it('increments count on trackUsage', async () => { + const { useFeatureUsageTracker } = await import('./useFeatureUsageTracker') + const { useCount, trackUsage } = useFeatureUsageTracker('test-feature') + + expect(useCount.value).toBe(0) + + trackUsage() + expect(useCount.value).toBe(1) + + trackUsage() + expect(useCount.value).toBe(2) + }) + + it('sets firstUsed only on first use', async () => { + vi.useFakeTimers() + const firstTs = 1000000 + vi.setSystemTime(firstTs) + try { + const { useFeatureUsageTracker } = + await import('./useFeatureUsageTracker') + const { usage, trackUsage } = useFeatureUsageTracker('test-feature') + + trackUsage() + expect(usage.value?.firstUsed).toBe(firstTs) + + vi.setSystemTime(firstTs + 5000) + trackUsage() + expect(usage.value?.firstUsed).toBe(firstTs) + } finally { + vi.useRealTimers() + } + }) + + it('updates lastUsed on each use', async () => { + vi.useFakeTimers() + try { + const { useFeatureUsageTracker } = + await import('./useFeatureUsageTracker') + const { usage, trackUsage } = useFeatureUsageTracker('test-feature') + + trackUsage() + const firstLastUsed = usage.value?.lastUsed ?? 0 + + vi.advanceTimersByTime(10) + trackUsage() + + expect(usage.value?.lastUsed).toBeGreaterThan(firstLastUsed) + } finally { + vi.useRealTimers() + } + }) + + it('reset clears feature data', async () => { + const { useFeatureUsageTracker } = await import('./useFeatureUsageTracker') + const { useCount, trackUsage, reset } = + useFeatureUsageTracker('test-feature') + + trackUsage() + trackUsage() + expect(useCount.value).toBe(2) + + reset() + expect(useCount.value).toBe(0) + }) + + it('tracks multiple features independently', async () => { + const { useFeatureUsageTracker } = await import('./useFeatureUsageTracker') + const featureA = useFeatureUsageTracker('feature-a') + const featureB = useFeatureUsageTracker('feature-b') + + featureA.trackUsage() + featureA.trackUsage() + featureB.trackUsage() + + expect(featureA.useCount.value).toBe(2) + expect(featureB.useCount.value).toBe(1) + }) + + it('persists to localStorage', async () => { + vi.useFakeTimers() + try { + const { useFeatureUsageTracker } = + await import('./useFeatureUsageTracker') + const { trackUsage } = useFeatureUsageTracker('persisted-feature') + + trackUsage() + await vi.runAllTimersAsync() + + const stored = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? '{}') + expect(stored['persisted-feature']?.useCount).toBe(1) + } finally { + vi.useRealTimers() + } + }) + + it('loads existing data from localStorage', async () => { + localStorage.setItem( + STORAGE_KEY, + JSON.stringify({ + 'existing-feature': { useCount: 5, firstUsed: 1000, lastUsed: 2000 } + }) + ) + + vi.resetModules() + const { useFeatureUsageTracker } = await import('./useFeatureUsageTracker') + const { useCount } = useFeatureUsageTracker('existing-feature') + + expect(useCount.value).toBe(5) + }) +}) diff --git a/src/platform/surveys/useFeatureUsageTracker.ts b/src/platform/surveys/useFeatureUsageTracker.ts new file mode 100644 index 000000000..b8d825db4 --- /dev/null +++ b/src/platform/surveys/useFeatureUsageTracker.ts @@ -0,0 +1,46 @@ +import { useStorage } from '@vueuse/core' +import { computed } from 'vue' + +interface FeatureUsage { + useCount: number + firstUsed: number + lastUsed: number +} + +type FeatureUsageRecord = Record + +const STORAGE_KEY = 'Comfy.FeatureUsage' + +/** + * Tracks feature usage for survey eligibility. + * Persists to localStorage. + */ +export function useFeatureUsageTracker(featureId: string) { + const usageData = useStorage(STORAGE_KEY, {}) + + const usage = computed(() => usageData.value[featureId]) + + const useCount = computed(() => usage.value?.useCount ?? 0) + + function trackUsage() { + const now = Date.now() + const existing = usageData.value[featureId] + + usageData.value[featureId] = { + useCount: (existing?.useCount ?? 0) + 1, + firstUsed: existing?.firstUsed ?? now, + lastUsed: now + } + } + + function reset() { + delete usageData.value[featureId] + } + + return { + usage, + useCount, + trackUsage, + reset + } +} diff --git a/src/renderer/extensions/vueNodes/components/InputSlot.vue b/src/renderer/extensions/vueNodes/components/InputSlot.vue index 43aa36ad6..61c4dd35a 100644 --- a/src/renderer/extensions/vueNodes/components/InputSlot.vue +++ b/src/renderer/extensions/vueNodes/components/InputSlot.vue @@ -23,7 +23,8 @@ :class=" cn( '-translate-x-1/2 w-3', - hasSlotError && 'ring-2 ring-error ring-offset-0 rounded-full' + hasSlotError && + 'before:ring-2 before:ring-error before:ring-offset-0 before:size-4 before:absolute before:rounded-full before:pointer-events-none' ) " :slot-data diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue index b990c957a..1d96cda83 100644 --- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue +++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue @@ -482,18 +482,30 @@ const lgraphNode = computed(() => { const showAdvancedInputsButton = computed(() => { const node = lgraphNode.value - if (!node || !(node instanceof SubgraphNode)) return false + if (!node) return false - // Check if there are hidden inputs (widgets not promoted) - const interiorNodes = node.subgraph.nodes - const allInteriorWidgets = interiorNodes.flatMap((n) => n.widgets ?? []) + // For subgraph nodes: check for unpromoted widgets + if (node instanceof SubgraphNode) { + const interiorNodes = node.subgraph.nodes + const allInteriorWidgets = interiorNodes.flatMap((n) => n.widgets ?? []) + return allInteriorWidgets.some((w) => !w.computedDisabled && !w.promoted) + } - return allInteriorWidgets.some((w) => !w.computedDisabled && !w.promoted) + // For regular nodes: show button if there are advanced widgets and they're currently hidden + const hasAdvancedWidgets = nodeData.widgets?.some((w) => w.options?.advanced) + return hasAdvancedWidgets && !node.showAdvanced }) function handleShowAdvancedInputs() { - const rightSidePanelStore = useRightSidePanelStore() - rightSidePanelStore.focusSection('advanced-inputs') + const node = lgraphNode.value + if (!node) return + + if (node instanceof SubgraphNode) { + const rightSidePanelStore = useRightSidePanelStore() + rightSidePanelStore.focusSection('advanced-inputs') + } else { + node.showAdvanced = true + } } const nodeMedia = computed(() => { diff --git a/src/renderer/extensions/vueNodes/widgets/components/ValueControlPopover.vue b/src/renderer/extensions/vueNodes/widgets/components/ValueControlPopover.vue index 095d64aba..ecfba4592 100644 --- a/src/renderer/extensions/vueNodes/widgets/components/ValueControlPopover.vue +++ b/src/renderer/extensions/vueNodes/widgets/components/ValueControlPopover.vue @@ -1,7 +1,6 @@ diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetDOM.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetDOM.vue index e701489a0..76fb5a560 100644 --- a/src/renderer/extensions/vueNodes/widgets/components/WidgetDOM.vue +++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetDOM.vue @@ -24,13 +24,5 @@ onMounted(() => { }) diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue index 1add11f4a..5a201779b 100644 --- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue +++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue @@ -3,6 +3,7 @@ import { onClickOutside } from '@vueuse/core' import { computed, ref, useTemplateRef } from 'vue' import { useI18n } from 'vue-i18n' +import Button from '@/components/ui/button/Button.vue' import { evaluateInput } from '@/lib/litegraph/src/utils/widget' import type { SimplifiedWidget } from '@/types/simplifiedWidget' import { cn } from '@/utils/tailwindUtil' @@ -41,7 +42,8 @@ const modelValue = defineModel({ default: 0 }) const formattedValue = computed(() => { const unformattedValue = dragValue.value ?? modelValue.value - if (!isFinite(unformattedValue)) return `${unformattedValue}` + if ((unformattedValue as unknown) === '' || !isFinite(unformattedValue)) + return `${unformattedValue}` return n(unformattedValue, { useGrouping: useGrouping.value, @@ -64,7 +66,6 @@ function updateValue(e: UIEvent) { textEdit.value = false } -const sharedButtonClass = 'w-8 bg-transparent border-0 text-sm text-smoke-700' const canDecrement = computed( () => modelValue.value > filteredProps.value.min && @@ -175,6 +176,20 @@ const buttonTooltip = computed(() => { } return null }) + +const sliderWidth = computed(() => { + const { max, min, step } = filteredProps.value + if ( + min === undefined || + max === undefined || + step === undefined || + (max - min) / step >= 100 + ) + return 0 + const value = dragValue.value ?? modelValue.value + const ratio = (value - min) / (max - min) + return (ratio * 100).toFixed(0) +}) diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetWithControl.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetWithControl.vue index f571d6dad..e4e1220bf 100644 --- a/src/renderer/extensions/vueNodes/widgets/components/WidgetWithControl.vue +++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetWithControl.vue @@ -2,6 +2,7 @@ import { computed, defineAsyncComponent, ref, watch } from 'vue' import type { Component } from 'vue' +import Popover from '@/components/ui/Popover.vue' import Button from '@/components/ui/button/Button.vue' import type { SimplifiedControlWidget, @@ -19,8 +20,6 @@ const props = defineProps<{ const modelValue = defineModel() -const popover = ref() - const controlModel = ref(props.widget.controlWidget.value) const controlButtonIcon = computed(() => { @@ -37,24 +36,24 @@ const controlButtonIcon = computed(() => { }) watch(controlModel, props.widget.controlWidget.update) - -const togglePopover = (event: Event) => { - popover.value.toggle(event) -} - diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useBoundingBoxWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useBoundingBoxWidget.ts new file mode 100644 index 000000000..ad1c25d80 --- /dev/null +++ b/src/renderer/extensions/vueNodes/widgets/composables/useBoundingBoxWidget.ts @@ -0,0 +1,103 @@ +import type { LGraphNode } from '@/lib/litegraph/src/litegraph' +import type { + IBaseWidget, + IBoundingBoxWidget, + IImageCropWidget, + INumericWidget +} from '@/lib/litegraph/src/types/widgets' +import type { Bounds } from '@/renderer/core/layout/types' +import type { + BoundingBoxInputSpec, + InputSpec as InputSpecV2 +} from '@/schemas/nodeDef/nodeDefSchemaV2' +import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets' + +function isBoundingBoxLikeWidget( + widget: IBaseWidget +): widget is IBoundingBoxWidget | IImageCropWidget { + return widget.type === 'boundingbox' || widget.type === 'imagecrop' +} + +function isNumericWidget(widget: IBaseWidget): widget is INumericWidget { + return widget.type === 'number' +} + +export const useBoundingBoxWidget = (): ComfyWidgetConstructorV2 => { + return ( + node: LGraphNode, + inputSpec: InputSpecV2 + ): IBoundingBoxWidget | IImageCropWidget => { + const spec = inputSpec as BoundingBoxInputSpec + const { name, component } = spec + const defaultValue: Bounds = spec.default ?? { + x: 0, + y: 0, + width: 512, + height: 512 + } + + const widgetType = component === 'ImageCrop' ? 'imagecrop' : 'boundingbox' + + const fields: (keyof Bounds)[] = ['x', 'y', 'width', 'height'] + const subWidgets: INumericWidget[] = [] + + const rawWidget = node.addWidget( + widgetType, + name, + { ...defaultValue }, + null, + { + serialize: true, + canvasOnly: false + } + ) + + if (!isBoundingBoxLikeWidget(rawWidget)) { + throw new Error(`Unexpected widget type: ${rawWidget.type}`) + } + + const widget = rawWidget + + widget.callback = () => { + for (let i = 0; i < fields.length; i++) { + const field = fields[i] + const subWidget = subWidgets[i] + if (subWidget) { + subWidget.value = widget.value[field] + } + } + } + + for (const field of fields) { + const subWidget = node.addWidget( + 'number', + field, + defaultValue[field], + function (this: INumericWidget, v: number) { + this.value = Math.round(v) + widget.value[field] = this.value + widget.callback?.(widget.value) + }, + { + min: field === 'width' || field === 'height' ? 1 : 0, + max: 8192, + step: 10, + step2: 1, + precision: 0, + serialize: false, + canvasOnly: true + } + ) + + if (!isNumericWidget(subWidget)) { + throw new Error(`Unexpected widget type: ${subWidget.type}`) + } + + subWidgets.push(subWidget) + } + + widget.linkedWidgets = subWidgets + + return widget + } +} diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts index 252ce3bba..9d2be02a8 100644 --- a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts +++ b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts @@ -94,7 +94,7 @@ const createAssetBrowserWidget = ( const displayLabel = currentValue ?? t('widgets.selectModel') const assetBrowserDialog = useAssetBrowserDialog() - async function openModal(this: IBaseWidget) { + async function openModal(widget: IBaseWidget) { if (!isAssetWidget(widget)) { throw new Error(`Expected asset widget but received ${widget.type}`) } @@ -129,7 +129,7 @@ const createAssetBrowserWidget = ( } const oldValue = widget.value - this.value = validatedFilename.data + widget.value = validatedFilename.data node.onWidgetChanged?.( widget.name, validatedFilename.data, diff --git a/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts b/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts index 14ea96daa..c82a4d395 100644 --- a/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts +++ b/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts @@ -54,6 +54,12 @@ const WidgetAudioUI = defineAsyncComponent( const Load3D = defineAsyncComponent( () => import('@/components/load3d/Load3D.vue') ) +const WidgetImageCrop = defineAsyncComponent( + () => import('@/components/imagecrop/WidgetImageCrop.vue') +) +const WidgetBoundingBox = defineAsyncComponent( + () => import('@/components/boundingbox/WidgetBoundingBox.vue') +) export const FOR_TESTING = { WidgetAudioUI, @@ -157,7 +163,23 @@ const coreWidgetDefinitions: Array<[string, WidgetDefinition]> = [ essential: false } ], - ['load3D', { component: Load3D, aliases: ['LOAD_3D'], essential: false }] + ['load3D', { component: Load3D, aliases: ['LOAD_3D'], essential: false }], + [ + 'imagecrop', + { + component: WidgetImageCrop, + aliases: ['IMAGECROP'], + essential: false + } + ], + [ + 'boundingbox', + { + component: WidgetBoundingBox, + aliases: ['BOUNDINGBOX'], + essential: false + } + ] ] const getComboWidgetAdditions = (): Map => { diff --git a/src/schemas/apiSchema.ts b/src/schemas/apiSchema.ts index 64b0b5208..37833cf2f 100644 --- a/src/schemas/apiSchema.ts +++ b/src/schemas/apiSchema.ts @@ -13,6 +13,9 @@ export type PromptId = z.infer export const resultItemType = z.enum(['input', 'output', 'temp']) export type ResultItemType = z.infer +const zCustomNodesI18n = z.record(z.string(), z.unknown()) +export type CustomNodesI18n = z.infer + const zResultItem = z.object({ filename: z.string().optional(), subfolder: z.string().optional(), diff --git a/src/schemas/nodeDef/nodeDefSchemaV2.ts b/src/schemas/nodeDef/nodeDefSchemaV2.ts index 9e319c163..4743164a1 100644 --- a/src/schemas/nodeDef/nodeDefSchemaV2.ts +++ b/src/schemas/nodeDef/nodeDefSchemaV2.ts @@ -64,6 +64,21 @@ const zImageCompareInputSpec = zBaseInputOptions.extend({ options: z.record(z.unknown()).optional() }) +const zBoundingBoxInputSpec = zBaseInputOptions.extend({ + type: z.literal('BOUNDINGBOX'), + name: z.string(), + isOptional: z.boolean().optional(), + component: z.enum(['ImageCrop']).optional(), + default: z + .object({ + x: z.number(), + y: z.number(), + width: z.number(), + height: z.number() + }) + .optional() +}) + const zMarkdownInputSpec = zBaseInputOptions.extend({ type: z.literal('MARKDOWN'), name: z.string(), @@ -126,6 +141,7 @@ const zInputSpec = z.union([ zColorInputSpec, zImageInputSpec, zImageCompareInputSpec, + zBoundingBoxInputSpec, zMarkdownInputSpec, zChartInputSpec, zGalleriaInputSpec, @@ -169,6 +185,7 @@ type StringInputSpec = z.infer export type ComboInputSpec = z.infer export type ColorInputSpec = z.infer export type ImageCompareInputSpec = z.infer +export type BoundingBoxInputSpec = z.infer export type ChartInputSpec = z.infer export type GalleriaInputSpec = z.infer export type TextareaInputSpec = z.infer diff --git a/src/scripts/api.ts b/src/scripts/api.ts index 67f98826e..41310b0bd 100644 --- a/src/scripts/api.ts +++ b/src/scripts/api.ts @@ -22,6 +22,7 @@ import type { } from '@/platform/workflow/validation/schemas/workflowSchema' import type { AssetDownloadWsMessage, + CustomNodesI18n, EmbeddingsResponse, ExecutedWsMessage, ExecutingWsMessage, @@ -35,6 +36,7 @@ import type { LogsRawResponse, LogsWsMessage, NotificationWsMessage, + PreviewMethod, ProgressStateWsMessage, ProgressTextWsMessage, ProgressWsMessage, @@ -44,8 +46,7 @@ import type { StatusWsMessageStatus, SystemStats, User, - UserDataFullInfo, - PreviewMethod + UserDataFullInfo } from '@/schemas/apiSchema' import type { JobDetail, @@ -951,7 +952,7 @@ export class ComfyApi extends EventTarget { * @param {*} type The endpoint to post to * @param {*} body Optional POST data */ - async #postItem(type: string, body: any) { + async #postItem(type: string, body?: Record) { try { await this.fetchApi('/' + type, { method: 'POST', @@ -1074,7 +1075,7 @@ export class ComfyApi extends EventTarget { */ async storeUserData( file: string, - data: any, + data: unknown, options: RequestInit & { overwrite?: boolean stringify?: boolean @@ -1091,7 +1092,7 @@ export class ComfyApi extends EventTarget { `/userdata/${encodeURIComponent(file)}?overwrite=${options.overwrite}&full_info=${options.full_info}`, { method: 'POST', - body: options?.stringify ? JSON.stringify(data) : data, + body: options?.stringify ? JSON.stringify(data) : (data as BodyInit), ...options } ) @@ -1251,7 +1252,7 @@ export class ComfyApi extends EventTarget { * * @returns The custom nodes i18n data */ - async getCustomNodesI18n(): Promise> { + async getCustomNodesI18n(): Promise { return (await axios.get(this.apiURL('/i18n'))).data } diff --git a/src/scripts/app.ts b/src/scripts/app.ts index 258214dd6..a9427f85b 100644 --- a/src/scripts/app.ts +++ b/src/scripts/app.ts @@ -1433,7 +1433,7 @@ export class ComfyApp { async handleFile(file: File, openSource?: WorkflowOpenSource) { const fileName = file.name.replace(/\.\w+$/, '') // Strip file extension const workflowData = await getWorkflowDataFromFile(file) - if (!workflowData) { + if (_.isEmpty(workflowData)) { if (file.type.startsWith('image')) { const transfer = new DataTransfer() transfer.items.add(file) diff --git a/src/scripts/changeTracker.ts b/src/scripts/changeTracker.ts index fa09ad49a..4db14677a 100644 --- a/src/scripts/changeTracker.ts +++ b/src/scripts/changeTracker.ts @@ -2,6 +2,7 @@ import _ from 'es-toolkit/compat' import * as jsondiffpatch from 'jsondiffpatch' import log from 'loglevel' +import type { CanvasPointerEvent } from '@/lib/litegraph/src/litegraph' import { LGraphCanvas, LiteGraph } from '@/lib/litegraph/src/litegraph' import { ComfyWorkflow, @@ -40,7 +41,7 @@ export class ChangeTracker { _restoringState: boolean = false ds?: { scale: number; offset: [number, number] } - nodeOutputs?: Record + nodeOutputs?: Record private subgraphState?: { navigation: string[] @@ -303,11 +304,11 @@ export class ChangeTracker { const prompt = LGraphCanvas.prototype.prompt LGraphCanvas.prototype.prompt = function ( title: string, - value: any, - callback: (v: any) => void, - event: any + value: string | number, + callback: (v: string) => void, + event: CanvasPointerEvent ) { - const extendedCallback = (v: any) => { + const extendedCallback = (v: string) => { callback(v) checkState() } diff --git a/src/scripts/ui/components/asyncDialog.ts b/src/scripts/ui/components/asyncDialog.ts index 1da1a5a4e..d1f45a9de 100644 --- a/src/scripts/ui/components/asyncDialog.ts +++ b/src/scripts/ui/components/asyncDialog.ts @@ -1,28 +1,28 @@ import { $el } from '../../ui' import { ComfyDialog } from '../dialog' -export class ComfyAsyncDialog extends ComfyDialog { - // @ts-expect-error fixme ts strict error - #resolve: (value: any) => void +type DialogAction = string | { value?: T; text: string } - constructor(actions?: Array) { +export class ComfyAsyncDialog< + T = string | null +> extends ComfyDialog { + #resolve: (value: T | null) => void = () => {} + + constructor(actions?: Array>) { super( 'dialog.comfy-dialog.comfyui-dialog', - // @ts-expect-error fixme ts strict error actions?.map((opt) => { - if (typeof opt === 'string') { - opt = { text: opt } - } + const action = typeof opt === 'string' ? { text: opt } : opt return $el('button.comfyui-button', { type: 'button', - textContent: opt.text, - onclick: () => this.close(opt.value ?? opt.text) - }) + textContent: action.text, + onclick: () => this.close((action.value ?? action.text) as T) + }) as HTMLButtonElement }) ) } - override show(html: string | HTMLElement | HTMLElement[]) { + override show(html: string | HTMLElement | HTMLElement[]): Promise { this.element.addEventListener('close', () => { this.close() }) @@ -34,7 +34,7 @@ export class ComfyAsyncDialog extends ComfyDialog { }) } - showModal(html: string | HTMLElement | HTMLElement[]) { + showModal(html: string | HTMLElement | HTMLElement[]): Promise { this.element.addEventListener('close', () => { this.close() }) @@ -47,22 +47,22 @@ export class ComfyAsyncDialog extends ComfyDialog { }) } - override close(result = null) { + override close(result: T | null = null) { this.#resolve(result) this.element.close() super.close() } - static async prompt({ + static async prompt({ title = null, message, actions }: { title: string | null message: string - actions: Array - }) { - const dialog = new ComfyAsyncDialog(actions) + actions: Array> + }): Promise { + const dialog = new ComfyAsyncDialog(actions) const content = [$el('span', message)] if (title) { content.unshift($el('h3', title)) diff --git a/src/scripts/ui/dialog.ts b/src/scripts/ui/dialog.ts index 23d43c2bd..12ca4a2e5 100644 --- a/src/scripts/ui/dialog.ts +++ b/src/scripts/ui/dialog.ts @@ -4,11 +4,10 @@ export class ComfyDialog< T extends HTMLElement = HTMLElement > extends EventTarget { element: T - // @ts-expect-error fixme ts strict error - textElement: HTMLElement + textElement!: HTMLElement #buttons: HTMLButtonElement[] | null - constructor(type = 'div', buttons = null) { + constructor(type = 'div', buttons: HTMLButtonElement[] | null = null) { super() this.#buttons = buttons this.element = $el(type + '.comfy-modal', { parent: document.body }, [ @@ -35,8 +34,7 @@ export class ComfyDialog< this.element.style.display = 'none' } - // @ts-expect-error fixme ts strict error - show(html) { + show(html: string | HTMLElement | HTMLElement[]): void { if (typeof html === 'string') { this.textElement.innerHTML = html } else { diff --git a/src/scripts/ui/draggableList.ts b/src/scripts/ui/draggableList.ts index 895d153b7..0a1fdb5a9 100644 --- a/src/scripts/ui/draggableList.ts +++ b/src/scripts/ui/draggableList.ts @@ -72,6 +72,8 @@ export class DraggableList extends EventTarget { this.off.push(this.on(document, 'mouseup', this.dragEnd)) // @ts-expect-error fixme ts strict error this.off.push(this.on(document, 'touchend', this.dragEnd)) + // @ts-expect-error fixme ts strict error + this.off.push(this.on(document, 'pointercancel', this.dragEnd)) } getAllItems() { @@ -113,6 +115,8 @@ export class DraggableList extends EventTarget { // @ts-expect-error fixme ts strict error dragStart(e) { + if (e.button > 0) return + if (e.target.classList.contains(this.handleClass)) { this.draggableItem = e.target.closest(this.itemSelector) } diff --git a/src/scripts/widgets.ts b/src/scripts/widgets.ts index 50dabe011..408555a19 100644 --- a/src/scripts/widgets.ts +++ b/src/scripts/widgets.ts @@ -8,6 +8,7 @@ import type { import { useSettingStore } from '@/platform/settings/settingStore' import { dynamicWidgets } from '@/core/graph/widgets/dynamicWidgets' import { useBooleanWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useBooleanWidget' +import { useBoundingBoxWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useBoundingBoxWidget' import { useChartWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useChartWidget' import { useColorWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useColorWidget' import { useComboWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useComboWidget' @@ -139,6 +140,9 @@ export function addValueControlWidgets( 'Allows the linked widget to be changed automatically, for example randomizing the noise seed.' valueControl[IS_CONTROL_WIDGET] = true updateControlWidgetLabel(valueControl) + Object.defineProperty(valueControl, 'disabled', { + get: () => targetWidget.computedDisabled + }) const widgets: [IComboWidget, ...IStringWidget[]] = [valueControl] const isCombo = isComboWidget(targetWidget) @@ -160,6 +164,9 @@ export function addValueControlWidgets( updateControlWidgetLabel(comboFilter) comboFilter.tooltip = "Allows for filtering the list of values when changing the value via the control generate mode. Allows for RegEx matches in the format /abc/ to only filter to values containing 'abc'." + Object.defineProperty(comboFilter, 'disabled', { + get: () => targetWidget.computedDisabled + }) widgets.push(comboFilter) } @@ -295,6 +302,7 @@ export const ComfyWidgets = { IMAGEUPLOAD: useImageUploadWidget(), COLOR: transformWidgetConstructorV2ToV1(useColorWidget()), IMAGECOMPARE: transformWidgetConstructorV2ToV1(useImageCompareWidget()), + BOUNDINGBOX: transformWidgetConstructorV2ToV1(useBoundingBoxWidget()), CHART: transformWidgetConstructorV2ToV1(useChartWidget()), GALLERIA: transformWidgetConstructorV2ToV1(useGalleriaWidget()), TEXTAREA: transformWidgetConstructorV2ToV1(useTextareaWidget()), diff --git a/src/services/providers/registrySearchProvider.test.ts b/src/services/providers/registrySearchProvider.test.ts index fe25018ad..b564bf7a7 100644 --- a/src/services/providers/registrySearchProvider.test.ts +++ b/src/services/providers/registrySearchProvider.test.ts @@ -11,6 +11,8 @@ vi.mock('@/stores/comfyRegistryStore', () => ({ describe('useComfyRegistrySearchProvider', () => { const mockSearchCall = vi.fn() const mockSearchClear = vi.fn() + const mockListAllPacksCall = vi.fn() + const mockListAllPacksClear = vi.fn() beforeEach(() => { vi.clearAllMocks() @@ -20,6 +22,10 @@ describe('useComfyRegistrySearchProvider', () => { search: { call: mockSearchCall, clear: mockSearchClear + }, + listAllPacks: { + call: mockListAllPacksCall, + clear: mockListAllPacksClear } } as any) }) @@ -111,14 +117,85 @@ describe('useComfyRegistrySearchProvider', () => { expect(result.nodePacks).toEqual([]) expect(result.querySuggestions).toEqual([]) }) + + it('should use listAllPacks for empty query', async () => { + const mockResults = { + nodes: [ + { id: '1', name: 'Pack 1' }, + { id: '2', name: 'Pack 2' } + ] + } + mockListAllPacksCall.mockResolvedValue(mockResults) + + const provider = useComfyRegistrySearchProvider() + const result = await provider.searchPacks('', { + pageSize: 20, + pageNumber: 0 + }) + + expect(mockListAllPacksCall).toHaveBeenCalledWith({ + limit: 20, + page: 1 + }) + expect(mockSearchCall).not.toHaveBeenCalled() + expect(result.nodePacks).toEqual(mockResults.nodes) + expect(result.querySuggestions).toEqual([]) + }) + + it('should use listAllPacks for whitespace-only query', async () => { + const mockResults = { + nodes: [{ id: '1', name: 'Pack 1' }] + } + mockListAllPacksCall.mockResolvedValue(mockResults) + + const provider = useComfyRegistrySearchProvider() + const result = await provider.searchPacks(' ', { + pageSize: 10, + pageNumber: 0 + }) + + expect(mockListAllPacksCall).toHaveBeenCalledWith({ + limit: 10, + page: 1 + }) + expect(mockSearchCall).not.toHaveBeenCalled() + expect(result.nodePacks).toEqual(mockResults.nodes) + }) + + it('should handle empty results from listAllPacks', async () => { + mockListAllPacksCall.mockResolvedValue({ nodes: [] }) + + const provider = useComfyRegistrySearchProvider() + const result = await provider.searchPacks('', { + pageSize: 10, + pageNumber: 0 + }) + + expect(result.nodePacks).toEqual([]) + expect(result.querySuggestions).toEqual([]) + }) + + it('should handle null results from listAllPacks', async () => { + mockListAllPacksCall.mockResolvedValue(null) + + const provider = useComfyRegistrySearchProvider() + const result = await provider.searchPacks('', { + pageSize: 10, + pageNumber: 0 + }) + + expect(result.nodePacks).toEqual([]) + expect(result.querySuggestions).toEqual([]) + }) }) describe('clearSearchCache', () => { - it('should delegate to store search.clear', () => { + it('should clear both search and listAllPacks caches', () => { const provider = useComfyRegistrySearchProvider() provider.clearSearchCache() expect(mockSearchClear).toHaveBeenCalled() + expect(mockListAllPacksClear).toHaveBeenCalled() }) }) diff --git a/src/services/providers/registrySearchProvider.ts b/src/services/providers/registrySearchProvider.ts index a2cede14a..d9f334205 100644 --- a/src/services/providers/registrySearchProvider.ts +++ b/src/services/providers/registrySearchProvider.ts @@ -25,33 +25,45 @@ export const useComfyRegistrySearchProvider = (): NodePackSearchProvider => { ): Promise => { const { pageSize, pageNumber, restrictSearchableAttributes } = params - // Determine search mode based on searchable attributes + // For empty queries, use the cached listAllPacks endpoint instead of search + if (!query || query.trim() === '') { + const listParams = { + limit: pageSize, + page: pageNumber + 1 // Registry API uses 1-based pagination + // Note: omitting 'latest' parameter defaults to cached result + } + + const listResult = await registryStore.listAllPacks.call(listParams) + const nodePacks = listResult?.nodes ?? [] + + return { + nodePacks, + querySuggestions: [] + } + } + + // For non-empty queries, use the search endpoint const isNodeSearch = restrictSearchableAttributes?.includes('comfy_nodes') const searchParams = { search: isNodeSearch ? undefined : query, comfy_node_search: isNodeSearch ? query : undefined, limit: pageSize, - page: pageNumber + 1 // Registry API uses 1-based pagination + page: pageNumber + 1 } const searchResult = await registryStore.search.call(searchParams) - - if (!searchResult || !searchResult.nodes) { - return { - nodePacks: [], - querySuggestions: [] - } - } + const nodePacks = searchResult?.nodes ?? [] return { - nodePacks: searchResult.nodes, + nodePacks, querySuggestions: [] // Registry doesn't support query suggestions } } const clearSearchCache = () => { registryStore.search.clear() + registryStore.listAllPacks.clear() } const getSortValue = ( diff --git a/src/stores/nodeDefStore.ts b/src/stores/nodeDefStore.ts index 849865941..27a46ad21 100644 --- a/src/stores/nodeDefStore.ts +++ b/src/stores/nodeDefStore.ts @@ -299,9 +299,10 @@ export const useNodeDefStore = defineStore('nodeDef', () => { const nodeDefs = computed(() => { const subgraphStore = useSubgraphStore() + // Blueprints first for discoverability in the node library sidebar return [ - ...Object.values(nodeDefsByName.value), - ...subgraphStore.subgraphBlueprints + ...subgraphStore.subgraphBlueprints, + ...Object.values(nodeDefsByName.value) ] }) const nodeDataTypes = computed(() => { diff --git a/tests-ui/stores/templateRankingStore.test.ts b/src/stores/templateRankingStore.test.ts similarity index 100% rename from tests-ui/stores/templateRankingStore.test.ts rename to src/stores/templateRankingStore.test.ts diff --git a/src/stores/workspace/nodeHelpStore.test.ts b/src/stores/workspace/nodeHelpStore.test.ts index dc8b7b466..0514e9029 100644 --- a/src/stores/workspace/nodeHelpStore.test.ts +++ b/src/stores/workspace/nodeHelpStore.test.ts @@ -1,74 +1,9 @@ -import { flushPromises } from '@vue/test-utils' import { createPinia, setActivePinia } from 'pinia' -import { beforeEach, describe, expect, it, vi } from 'vitest' -import { nextTick } from 'vue' +import { beforeEach, describe, expect, it } from 'vitest' import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore' -vi.mock('@/scripts/api', () => ({ - api: { - fileURL: vi.fn((url) => url) - } -})) - -vi.mock('@/i18n', () => ({ - i18n: { - global: { - locale: { - value: 'en' - } - } - } -})) - -vi.mock('@/types/nodeSource', () => ({ - NodeSourceType: { - Core: 'core', - CustomNodes: 'custom_nodes' - }, - getNodeSource: vi.fn((pythonModule) => { - if (pythonModule?.startsWith('custom_nodes.')) { - return { type: 'custom_nodes' } - } - return { type: 'core' } - }) -})) - -vi.mock('dompurify', () => ({ - default: { - sanitize: vi.fn((html) => html) - } -})) - -vi.mock('marked', () => ({ - marked: { - parse: vi.fn((markdown, options) => { - if (options?.renderer) { - if (markdown.includes('![')) { - const matches = markdown.match(/!\[(.*?)\]\((.*?)\)/) - if (matches) { - const [, text, href] = matches - return options.renderer.image({ href, text, title: '' }) - } - } - } - return `

${markdown}

` - }) - }, - Renderer: class Renderer { - image = vi.fn( - ({ href, title, text }) => - `${text}` - ) - link = vi.fn( - ({ href, title, text }) => - `${text}` - ) - } -})) - describe('nodeHelpStore', () => { - // Define a mock node for testing const mockCoreNode = { name: 'TestNode', display_name: 'Test Node', @@ -78,23 +13,8 @@ describe('nodeHelpStore', () => { python_module: 'comfy.test_node' } - const mockCustomNode = { - name: 'CustomNode', - display_name: 'Custom Node', - description: 'A custom node', - inputs: {}, - outputs: [], - python_module: 'custom_nodes.test_module.custom@1.0.0' - } - - // Mock fetch responses - const mockFetch = vi.fn() - global.fetch = mockFetch - beforeEach(() => { - // Setup Pinia setActivePinia(createPinia()) - mockFetch.mockReset() }) it('should initialize with empty state', () => { @@ -122,278 +42,4 @@ describe('nodeHelpStore', () => { expect(nodeHelpStore.currentHelpNode).toBeNull() expect(nodeHelpStore.isHelpOpen).toBe(false) }) - - it('should generate correct baseUrl for core nodes', async () => { - const nodeHelpStore = useNodeHelpStore() - - nodeHelpStore.openHelp(mockCoreNode as any) - await nextTick() - - expect(nodeHelpStore.baseUrl).toBe(`/docs/${mockCoreNode.name}/`) - }) - - it('should generate correct baseUrl for custom nodes', async () => { - const nodeHelpStore = useNodeHelpStore() - - nodeHelpStore.openHelp(mockCustomNode as any) - await nextTick() - - expect(nodeHelpStore.baseUrl).toBe('/extensions/test_module/docs/') - }) - - it('should render markdown content correctly', async () => { - const nodeHelpStore = useNodeHelpStore() - - mockFetch.mockResolvedValueOnce({ - ok: true, - text: async () => '# Test Help\nThis is test help content' - }) - - nodeHelpStore.openHelp(mockCoreNode as any) - await flushPromises() - - expect(nodeHelpStore.renderedHelpHtml).toContain( - 'This is test help content' - ) - }) - - it('should handle fetch errors and fall back to description', async () => { - const nodeHelpStore = useNodeHelpStore() - - mockFetch.mockResolvedValueOnce({ - ok: false, - statusText: 'Not Found' - }) - - nodeHelpStore.openHelp(mockCoreNode as any) - await flushPromises() - - expect(nodeHelpStore.error).toBe('Not Found') - expect(nodeHelpStore.renderedHelpHtml).toContain(mockCoreNode.description) - }) - - it('should include alt attribute for images', async () => { - const nodeHelpStore = useNodeHelpStore() - - mockFetch.mockResolvedValueOnce({ - ok: true, - text: async () => '![image](test.jpg)' - }) - - nodeHelpStore.openHelp(mockCustomNode as any) - await flushPromises() - expect(nodeHelpStore.renderedHelpHtml).toContain('alt="image"') - }) - - it('should prefix relative video src in custom nodes', async () => { - const nodeHelpStore = useNodeHelpStore() - - mockFetch.mockResolvedValueOnce({ - ok: true, - text: async () => '' - }) - - nodeHelpStore.openHelp(mockCustomNode as any) - await flushPromises() - expect(nodeHelpStore.renderedHelpHtml).toContain( - 'src="/extensions/test_module/docs/video.mp4"' - ) - }) - - it('should prefix relative video src for core nodes with node-specific base URL', async () => { - const nodeHelpStore = useNodeHelpStore() - - mockFetch.mockResolvedValueOnce({ - ok: true, - text: async () => '' - }) - - nodeHelpStore.openHelp(mockCoreNode as any) - await flushPromises() - expect(nodeHelpStore.renderedHelpHtml).toContain( - `src="/docs/${mockCoreNode.name}/video.mp4"` - ) - }) - - it('should prefix relative source src in custom nodes', async () => { - const nodeHelpStore = useNodeHelpStore() - - mockFetch.mockResolvedValueOnce({ - ok: true, - text: async () => - '' - }) - - nodeHelpStore.openHelp(mockCustomNode as any) - await flushPromises() - expect(nodeHelpStore.renderedHelpHtml).toContain( - 'src="/extensions/test_module/docs/video.mp4"' - ) - }) - - it('should prefix relative source src for core nodes with node-specific base URL', async () => { - const nodeHelpStore = useNodeHelpStore() - - mockFetch.mockResolvedValueOnce({ - ok: true, - text: async () => - '' - }) - - nodeHelpStore.openHelp(mockCoreNode as any) - await flushPromises() - expect(nodeHelpStore.renderedHelpHtml).toContain( - `src="/docs/${mockCoreNode.name}/video.webm"` - ) - }) - - it('should handle loading state', async () => { - const nodeHelpStore = useNodeHelpStore() - - mockFetch.mockImplementationOnce(() => new Promise(() => {})) // Never resolves - - nodeHelpStore.openHelp(mockCoreNode as any) - await nextTick() - - expect(nodeHelpStore.isLoading).toBe(true) - }) - - it('should try fallback URL for custom nodes', async () => { - const nodeHelpStore = useNodeHelpStore() - - mockFetch - .mockResolvedValueOnce({ - ok: false, - statusText: 'Not Found' - }) - .mockResolvedValueOnce({ - ok: true, - text: async () => '# Fallback content' - }) - - nodeHelpStore.openHelp(mockCustomNode as any) - await flushPromises() - - expect(mockFetch).toHaveBeenCalledTimes(2) - expect(mockFetch).toHaveBeenCalledWith( - '/extensions/test_module/docs/CustomNode/en.md' - ) - expect(mockFetch).toHaveBeenCalledWith( - '/extensions/test_module/docs/CustomNode.md' - ) - }) - - it('should prefix relative img src in raw HTML for custom nodes', async () => { - const nodeHelpStore = useNodeHelpStore() - - mockFetch.mockResolvedValueOnce({ - ok: true, - text: async () => '# Test\nTest image' - }) - - nodeHelpStore.openHelp(mockCustomNode as any) - await flushPromises() - expect(nodeHelpStore.renderedHelpHtml).toContain( - 'src="/extensions/test_module/docs/image.png"' - ) - expect(nodeHelpStore.renderedHelpHtml).toContain('alt="Test image"') - }) - - it('should prefix relative img src in raw HTML for core nodes', async () => { - const nodeHelpStore = useNodeHelpStore() - - mockFetch.mockResolvedValueOnce({ - ok: true, - text: async () => '# Test\nTest image' - }) - - nodeHelpStore.openHelp(mockCoreNode as any) - await flushPromises() - expect(nodeHelpStore.renderedHelpHtml).toContain( - `src="/docs/${mockCoreNode.name}/image.png"` - ) - expect(nodeHelpStore.renderedHelpHtml).toContain('alt="Test image"') - }) - - it('should not prefix absolute img src in raw HTML', async () => { - const nodeHelpStore = useNodeHelpStore() - - mockFetch.mockResolvedValueOnce({ - ok: true, - text: async () => 'Absolute' - }) - - nodeHelpStore.openHelp(mockCustomNode as any) - await flushPromises() - expect(nodeHelpStore.renderedHelpHtml).toContain( - 'src="/absolute/image.png"' - ) - expect(nodeHelpStore.renderedHelpHtml).toContain('alt="Absolute"') - }) - - it('should not prefix external img src in raw HTML', async () => { - const nodeHelpStore = useNodeHelpStore() - - mockFetch.mockResolvedValueOnce({ - ok: true, - text: async () => - 'External' - }) - - nodeHelpStore.openHelp(mockCustomNode as any) - await flushPromises() - expect(nodeHelpStore.renderedHelpHtml).toContain( - 'src="https://example.com/image.png"' - ) - expect(nodeHelpStore.renderedHelpHtml).toContain('alt="External"') - }) - - it('should handle various quote styles in media src attributes', async () => { - const nodeHelpStore = useNodeHelpStore() - - mockFetch.mockResolvedValueOnce({ - ok: true, - text: async () => `# Media Test - -Testing quote styles in properly formed HTML: - - - -Double quotes -Single quotes - - - -The MEDIA_SRC_REGEX handles both single and double quotes in img, video and source tags.` - }) - - nodeHelpStore.openHelp(mockCoreNode as any) - await flushPromises() - - // Check that all media elements with different quote styles are prefixed correctly - // Double quotes remain as double quotes - expect(nodeHelpStore.renderedHelpHtml).toContain( - `src="/docs/${mockCoreNode.name}/video1.mp4"` - ) - expect(nodeHelpStore.renderedHelpHtml).toContain( - `src="/docs/${mockCoreNode.name}/image1.png"` - ) - expect(nodeHelpStore.renderedHelpHtml).toContain( - `src="/docs/${mockCoreNode.name}/video3.mp4"` - ) - - // Single quotes remain as single quotes in the output - expect(nodeHelpStore.renderedHelpHtml).toContain( - `src='/docs/${mockCoreNode.name}/video2.mp4'` - ) - expect(nodeHelpStore.renderedHelpHtml).toContain( - `src='/docs/${mockCoreNode.name}/image2.png'` - ) - expect(nodeHelpStore.renderedHelpHtml).toContain( - `src='/docs/${mockCoreNode.name}/video3.webm'` - ) - }) }) diff --git a/src/stores/workspace/nodeHelpStore.ts b/src/stores/workspace/nodeHelpStore.ts index a04d6d829..4e6765040 100644 --- a/src/stores/workspace/nodeHelpStore.ts +++ b/src/stores/workspace/nodeHelpStore.ts @@ -1,18 +1,11 @@ import { defineStore } from 'pinia' -import { computed, ref, watch } from 'vue' +import { computed, ref } from 'vue' -import { i18n } from '@/i18n' -import { nodeHelpService } from '@/services/nodeHelpService' import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore' -import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil' -import { getNodeHelpBaseUrl } from '@/workbench/utils/nodeHelpUtil' export const useNodeHelpStore = defineStore('nodeHelp', () => { const currentHelpNode = ref(null) const isHelpOpen = computed(() => currentHelpNode.value !== null) - const helpContent = ref('') - const isLoading = ref(false) - const errorMsg = ref(null) function openHelp(nodeDef: ComfyNodeDefImpl) { currentHelpNode.value = nodeDef @@ -22,48 +15,10 @@ export const useNodeHelpStore = defineStore('nodeHelp', () => { currentHelpNode.value = null } - // Base URL for relative assets in node docs markdown - const baseUrl = computed(() => { - const node = currentHelpNode.value - if (!node) return '' - return getNodeHelpBaseUrl(node) - }) - - // Watch for help node changes and fetch its docs markdown - watch( - () => currentHelpNode.value, - async (node) => { - helpContent.value = '' - errorMsg.value = null - - if (node) { - isLoading.value = true - try { - const locale = i18n.global.locale.value || 'en' - helpContent.value = await nodeHelpService.fetchNodeHelp(node, locale) - } catch (e: any) { - errorMsg.value = e.message - helpContent.value = node.description || '' - } finally { - isLoading.value = false - } - } - }, - { immediate: true } - ) - - const renderedHelpHtml = computed(() => { - return renderMarkdownToHtml(helpContent.value, baseUrl.value) - }) - return { currentHelpNode, isHelpOpen, openHelp, - closeHelp, - baseUrl, - renderedHelpHtml, - isLoading, - error: errorMsg + closeHelp } }) diff --git a/src/utils/widgetUtil.ts b/src/utils/widgetUtil.ts new file mode 100644 index 000000000..c90283156 --- /dev/null +++ b/src/utils/widgetUtil.ts @@ -0,0 +1,68 @@ +import { isProxyWidget } from '@/core/graph/subgraph/proxyWidget' +import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode' +import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode' +import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets' + +/** + * Renames a widget and its corresponding input. + * Handles both regular widgets and proxy widgets in subgraphs. + * + * @param widget The widget to rename + * @param node The node containing the widget + * @param newLabel The new label for the widget (empty string or undefined to clear) + * @param parents Optional array of parent SubgraphNodes (for proxy widgets) + * @returns true if the rename was successful, false otherwise + */ +export function renameWidget( + widget: IBaseWidget, + node: LGraphNode, + newLabel: string, + parents?: SubgraphNode[] +): boolean { + // For proxy widgets in subgraphs, we need to rename the original interior widget + if (isProxyWidget(widget) && parents?.length) { + const subgraph = parents[0].subgraph + if (!subgraph) { + console.error('Could not find subgraph for proxy widget') + return false + } + const interiorNode = subgraph.getNodeById(widget._overlay.nodeId) + + if (!interiorNode) { + console.error('Could not find interior node for proxy widget') + return false + } + + const originalWidget = interiorNode.widgets?.find( + (w) => w.name === widget._overlay.widgetName + ) + + if (!originalWidget) { + console.error('Could not find original widget for proxy widget') + return false + } + + // Rename the original widget + originalWidget.label = newLabel || undefined + + // Also rename the corresponding input on the interior node + const interiorInput = interiorNode.inputs?.find( + (inp) => inp.widget?.name === widget._overlay.widgetName + ) + if (interiorInput) { + interiorInput.label = newLabel || undefined + } + } + + // Always rename the widget on the current node (either regular widget or proxy widget) + const input = node.inputs?.find((inp) => inp.widget?.name === widget.name) + + // Intentionally mutate the widget object here as it's a reference + // to the actual widget in the graph + widget.label = newLabel || undefined + if (input) { + input.label = newLabel || undefined + } + + return true +} diff --git a/src/workbench/extensions/manager/components/manager/packCard/PackCard.test.ts b/src/workbench/extensions/manager/components/manager/packCard/PackCard.test.ts index 3e5116739..b3a92e5a3 100644 --- a/src/workbench/extensions/manager/components/manager/packCard/PackCard.test.ts +++ b/src/workbench/extensions/manager/components/manager/packCard/PackCard.test.ts @@ -10,15 +10,22 @@ import type { RegistryPack } from '@/workbench/extensions/manager/types/comfyManagerTypes' +const translateMock = vi.hoisted(() => + vi.fn((key: string, choice?: number) => + typeof choice === 'number' ? `${key}-${choice}` : key + ) +) +const dateMock = vi.hoisted(() => vi.fn(() => '2024. 1. 1.')) + // Mock dependencies vi.mock('vue-i18n', () => ({ useI18n: vi.fn(() => ({ - d: vi.fn(() => '2024. 1. 1.'), - t: vi.fn((key: string) => key) + d: dateMock, + t: translateMock })), createI18n: vi.fn(() => ({ global: { - t: vi.fn((key: string) => key), + t: translateMock, te: vi.fn(() => true) } })) @@ -187,6 +194,18 @@ describe('PackCard', () => { // Should still render without errors expect(wrapper.exists()).toBe(true) }) + + it('should use localized singular/plural nodes label', () => { + const packWithNodes = { + ...mockNodePack, + comfy_nodes: ['node-a'] + } as MergedNodePack + + const wrapper = createWrapper({ nodePack: packWithNodes }) + + expect(wrapper.text()).toContain('g.nodesCount-1') + expect(translateMock).toHaveBeenCalledWith('g.nodesCount', 1) + }) }) describe('component structure', () => { diff --git a/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue b/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue index 6900e71df..17ffdd102 100644 --- a/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue +++ b/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue @@ -36,8 +36,8 @@

-
- {{ nodesCount }} {{ $t('g.nodes') }} +
+ {{ nodesLabel }}
() -const { d } = useI18n() +const { d, t } = useI18n() const colorPaletteStore = useColorPaletteStore() const isLightTheme = computed( @@ -115,6 +115,9 @@ const isDisabled = computed( const nodesCount = computed(() => isMergedNodePack(nodePack) ? nodePack.comfy_nodes?.length : undefined ) +const nodesLabel = computed(() => + nodesCount.value ? t('g.nodesCount', nodesCount.value) : '' +) const publisherName = computed(() => { if (!nodePack) return null diff --git a/vite.config.mts b/vite.config.mts index 713de6866..9769ec300 100644 --- a/vite.config.mts +++ b/vite.config.mts @@ -11,8 +11,8 @@ import IconsResolver from 'unplugin-icons/resolver' import Icons from 'unplugin-icons/vite' import Components from 'unplugin-vue-components/vite' import typegpuPlugin from 'unplugin-typegpu/vite' -import { defineConfig } from 'vite' -import type { ProxyOptions, UserConfig } from 'vite' +import { defineConfig } from 'vitest/config' +import type { ProxyOptions } from 'vite' import { createHtmlPlugin } from 'vite-plugin-html' import vueDevTools from 'vite-plugin-vue-devtools' @@ -51,6 +51,14 @@ const DISTRIBUTION: 'desktop' | 'localhost' | 'cloud' = ? 'cloud' : 'localhost' +// Nightly builds are from main branch; RC/stable builds are from core/* branches +// Can be overridden via IS_NIGHTLY env var for testing +const IS_NIGHTLY = + process.env.IS_NIGHTLY === 'true' || + (process.env.IS_NIGHTLY !== 'false' && + process.env.CI === 'true' && + process.env.GITHUB_REF_NAME === 'main') + // Disable Vue DevTools for production cloud distribution const DISABLE_VUE_PLUGINS = process.env.DISABLE_VUE_PLUGINS === 'true' || @@ -412,77 +420,83 @@ export default defineConfig({ ], build: { - minify: SHOULD_MINIFY ? 'esbuild' : false, + minify: SHOULD_MINIFY, target: 'es2022', sourcemap: GENERATE_SOURCEMAP, - rollupOptions: { - treeshake: true, - output: { - manualChunks: (id) => { - if (!id.includes('node_modules')) { - return undefined - } - - if (id.includes('primevue') || id.includes('@primeuix')) { - return 'vendor-primevue' - } - - if (id.includes('@tiptap')) { - return 'vendor-tiptap' - } - - if (id.includes('chart.js')) { - return 'vendor-chart' - } - - if (id.includes('three') || id.includes('@sparkjsdev')) { - return 'vendor-three' - } - - if (id.includes('@xterm')) { - return 'vendor-xterm' - } - - if (id.includes('/vue') || id.includes('pinia')) { - return 'vendor-vue' - } - if (id.includes('reka-ui')) { - return 'vendor-reka-ui' - } - - return 'vendor-other' - } - } - } - }, - - esbuild: { - minifyIdentifiers: SHOULD_MINIFY, - keepNames: true, - minifySyntax: SHOULD_MINIFY, - minifyWhitespace: SHOULD_MINIFY, - pure: SHOULD_MINIFY - ? [ - 'console.log', + rolldownOptions: { + treeshake: { + manualPureFunctions: [ + 'console.clear', + 'console.count', + 'console.countReset', 'console.debug', - 'console.info', - 'console.trace', 'console.dir', 'console.dirxml', 'console.group', 'console.groupCollapsed', 'console.groupEnd', + 'console.info', + 'console.log', + 'console.profile', + 'console.profileEnd', 'console.table', 'console.time', 'console.timeEnd', 'console.timeLog', - 'console.count', - 'console.countReset', - 'console.profile', - 'console.profileEnd', - 'console.clear' + 'console.trace' ] - : [] + }, + experimental: { + strictExecutionOrder: true + }, + output: { + keepNames: true, + codeSplitting: { + groups: [ + { + name: 'vendor-primevue', + test: /[\\/]node_modules[\\/](@?primevue|@primeuix)[\\/]/, + priority: 10 + }, + { + name: 'vendor-tiptap', + test: /[\\/]node_modules[\\/]@tiptap[\\/]/, + priority: 10 + }, + { + name: 'vendor-chart', + test: /[\\/]node_modules[\\/]chart\.js[\\/]/, + priority: 10 + }, + { + name: 'vendor-three', + test: /[\\/]node_modules[\\/](three|@sparkjsdev)[\\/]/, + priority: 10 + }, + { + name: 'vendor-xterm', + test: /[\\/]node_modules[\\/]@xterm[\\/]/, + priority: 10 + }, + { + name: 'vendor-vue', + test: /[\\/]node_modules[\\/](vue|pinia)[\\/]/, + priority: 10 + }, + { + name: 'vendor-reka-ui', + test: /[\\/]node_modules[\\/]reka-ui[\\/]/, + priority: 10 + }, + { + name: 'vendor-other', + test: /[\\/]node_modules[\\/]/, + priority: 0 + } + ] + } + } + } }, define: { @@ -496,7 +510,8 @@ export default defineConfig({ __ALGOLIA_APP_ID__: JSON.stringify(process.env.ALGOLIA_APP_ID || ''), __ALGOLIA_API_KEY__: JSON.stringify(process.env.ALGOLIA_API_KEY || ''), __USE_PROD_CONFIG__: process.env.USE_PROD_CONFIG === 'true', - __DISTRIBUTION__: JSON.stringify(DISTRIBUTION) + __DISTRIBUTION__: JSON.stringify(DISTRIBUTION), + __IS_NIGHTLY__: JSON.stringify(IS_NIGHTLY) }, resolve: { @@ -511,5 +526,28 @@ export default defineConfig({ optimizeDeps: { exclude: ['@comfyorg/comfyui-electron-types'], entries: ['index.html'] + }, + + test: { + globals: true, + environment: 'happy-dom', + setupFiles: ['./vitest.setup.ts'], + retry: process.env.CI ? 2 : 0, + include: [ + 'src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}', + 'packages/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}' + ], + coverage: { + reporter: ['text', 'json', 'html'] + }, + exclude: [ + '**/node_modules/**', + '**/dist/**', + '**/cypress/**', + '**/.{idea,git,cache,output,temp}/**', + '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build,eslint}.config.*', + '**/.{oxlintrc,oxfmtrc}.json' + ], + silent: 'passed-only' } -}) satisfies UserConfig as UserConfig +}) diff --git a/vitest.config.ts b/vitest.config.ts deleted file mode 100644 index b74f7496c..000000000 --- a/vitest.config.ts +++ /dev/null @@ -1,48 +0,0 @@ -import vue from '@vitejs/plugin-vue' -import { FileSystemIconLoader } from 'unplugin-icons/loaders' -import Icons from 'unplugin-icons/vite' -import { defineConfig } from 'vitest/config' - -export default defineConfig({ - plugins: [ - vue(), - Icons({ - compiler: 'vue3', - customCollections: { - comfy: FileSystemIconLoader('packages/design-system/src/icons') - } - }) - ], - test: { - globals: true, - environment: 'happy-dom', - setupFiles: ['./vitest.setup.ts'], - retry: process.env.CI ? 2 : 0, - include: [ - 'src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}', - 'packages/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}' - ], - coverage: { - reporter: ['text', 'json', 'html'] - }, - exclude: [ - '**/node_modules/**', - '**/dist/**', - '**/cypress/**', - '**/.{idea,git,cache,output,temp}/**', - '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build,eslint,prettier}.config.*' - ], - silent: 'passed-only' - }, - resolve: { - alias: { - '@/utils/formatUtil': '/packages/shared-frontend-utils/src/formatUtil.ts', - '@/utils/networkUtil': - '/packages/shared-frontend-utils/src/networkUtil.ts', - '@': '/src' - } - }, - define: { - __USE_PROD_CONFIG__: process.env.USE_PROD_CONFIG === 'true' - } -}) diff --git a/vitest.setup.ts b/vitest.setup.ts index fca677557..81c39723a 100644 --- a/vitest.setup.ts +++ b/vitest.setup.ts @@ -46,6 +46,7 @@ globalThis.__ALGOLIA_APP_ID__ = '' globalThis.__ALGOLIA_API_KEY__ = '' globalThis.__USE_PROD_CONFIG__ = false globalThis.__DISTRIBUTION__ = 'localhost' +globalThis.__IS_NIGHTLY__ = false // Define runtime config for tests window.__CONFIG__ = {