Skip to content

Conversation

@bezo97
Copy link
Collaborator

@bezo97 bezo97 commented Dec 24, 2024

Closes #1008 feature request.
Requires the following backend PR: comfyanonymous/ComfyUI#6193 (merged)

image

Implementation details:

  • Categories are provided by the api, which are the custom_nodes module names. The ones without template files are omitted.
  • The first category holds the existing templates that are provided by the frontend
  • Added a carousel to display more items
  • Workflow thumbnails are shown when present, otherwise a generic document icon is displayed
  • Using a store to avoid repeated requests. A spinner is shown while loading items the first time (but the default category items are visible anyway):
    image
  • Getting the carousel to look fine on smaller screens was rather problematic but here is a best effort
    image

┆Issue is synchronized with this Notion page by Unito

- Show selection list for custom_nodes that contain workflow templates
- Put item cards in carousel
- Use getWorkflowTemplates() to fetch items
@bezo97

This comment was marked as resolved.

Copy link
Contributor

@christian-byrne christian-byrne left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested and works for me after removing api prefix from route.

@huchenlei huchenlei marked this pull request as ready for review December 28, 2024 22:08
@huchenlei huchenlei requested a review from a team as a code owner December 28, 2024 22:08
<div
v-for="template in templates"
:key="template"
:data-testid="`template-workflow-${template}`"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please keep the data-testid for playwright test.

ws: true
},

'/workflow_templates': {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please revert unrelated format changes.

background-color: var(--comfy-menu-secondary-bg);
color: var(--fg-color);
font-family: primeicons, sans-serif;
content: '\e958'; /* Document icon from primevue */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's use a less hacky way to implement fallback placeholder.

const json = await fetch(api.fileURL(`templates/${id}.json`)).then((r) =>
r.json()
)
let json
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's extract the storage of custom nodes workflow templates as a Pinia store to avoid reloading everytime the dialog is opened.

<div class="flex items-center justify-center">
<div
class="absolute top-0 left-0 w-64 h-64 overflow-hidden opacity-0 transition duration-300 ease-in-out hover:opacity-100 bg-opacity-50 bg-black flex items-center justify-center"
class="relative overflow-hidden rounded-lg cursor-pointer w-64 h-64"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The template workflow item here should probably be extracted as a separated Vue component.

:key="template"
:data-testid="`template-workflow-${template}`"
<div class="flex h-96">
<Listbox
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Listbox allows null value on v-model:modeValue. Currently deselect item on that listbox will cause error.

image

@bezo97 bezo97 requested a review from huchenlei December 29, 2024 19:43
@huchenlei huchenlei merged commit 5218024 into main Dec 30, 2024
10 checks passed
@huchenlei huchenlei deleted the feature/custom_workflow_templates branch December 30, 2024 03:26
viva-jinyi added a commit that referenced this pull request Jul 27, 2025
Use collectAllNodes to recursively scan subgraphs for missing custom nodes.

Fixes #2032
viva-jinyi added a commit that referenced this pull request Jul 27, 2025
Use collectAllNodes to recursively scan subgraphs for missing custom nodes.

Fixes #2032
viva-jinyi added a commit that referenced this pull request Jul 28, 2025
Use collectAllNodes to recursively scan subgraphs for missing custom nodes.

Fixes #2032
viva-jinyi added a commit that referenced this pull request Jul 29, 2025
Use collectAllNodes to recursively scan subgraphs for missing custom nodes.

Fixes #2032
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request]: add templates from custom nodes to the template gallery

3 participants