This custom node turns a ComfyUI workflow into a normal website(nuxt / vue). Turns a normal workflow into a simplier interface like A1111, forge, etc.

You can...

Restrict which nodes the user has access to
Allow mutiple user logins
Accept payments

Install

(Install nodejs)[https://nodejs.org/en/download]

After installing the custom node. On the first run, it'll install the nuxt web site into output/presentation-site which will take a few minutes.

To use

Get any workflow.
Add a group.
Put "PresentationTab" into that group.
Give it a name.
Put into that group the nodes that you want the user to be able to use.
If you only want the user access some of the inputs in a node, not all. Use Primitive Int/String, string(multiline), Presentation Seed, Presentation Drop Down, Presentation File. Connect it to the node and put them in the group.
For output, use these nodes: PreviewImage, PreviewAudio, VHS_VideoCombine, SaveVideo, SaveImage, SaveAudio
Click "save" on the "PresentationTab" node.
Visit (http://[::1]:3000/)[http://[::1]:3000/]

(Video instructions)[https://youtu.be/M6HKBr5D-4s]

How to use the nodes

Node	Description
Presentation File	Used to pick models, loras, etc.
Presentation Advanced	Split the rest of the page into an advanced section.
Presentation Audio / Video / Image	Load media
Presentation Drop down	A fixed selection. Can be used in place of the Presentation File node when you only want people to select from a pre-defined range.
Presentation History	Queue History. You can remove the normal history from MainPage.vue
Presentation Progress	Progress bar. You can remove the normal progress bar from MainPage.vue
Presentation Add Queue	The queue button
Presentation Component	Add your own custom component

To style

Change the CSS style files... assets/css/Style.css assets/css/Style.mobile.css

To remove a tab

Remove the folder & file output/presentation-site/components/tabs/xxx/ output/presentation-site/components/tabs/xxx.vue

In ComfyUI go to settings -> presentation -> rebuild

Security

In the file output/presentation-site/components/tabs/<tabname>/workflow.json There is workflowIds. The server will only modify these node IDs. These are the nodes inside the same group as PresentationTab in ComfyUI. If you add things to the UI that refers to other nodes, you have to add them here.

Nodes...

You can plug this into most things that reads a file, models, loras, load image / audio / etc.

In multi user mode, each users' files are stored in ComfyUI/output/username
The path should start with something like input, output, checkpoints, loras, vae, text_encoders, diffusion_models, clip_vision, diffusers, upscale_models. Defined in ComfyUI/folder_paths.py

.env

These settings are needed in the .env file for user logins.

Name	Description
NUXT_SESSION_PASSWORD	Make a random string for this, at least 32 characters. Used by nuxt-auth-utils
GUEST_ACCOUNT	The name of the guest account when no one is logged in "guest_account"
MONGODB_URL	If you want multiple users, this is required. Can be a local db, or Mongodb.com have a free teir. Example: mongodb+srv://username:password@yourcluster.mongodb.net
NUXT_OAUTH_GOOGLE_CLIENT_ID	For Google auth logins
NUXT_OAUTH_GOOGLE_CLIENT_SECRET	Client secret for Google auth logins
NUXT_OAUTH_FACEBOOK_CLIENT_ID	For facebook logins
NUXT_OAUTH_FACEBOOK_CLIENT_SECRET	Secret for facebook logins

Payments setup. You will need user logins setup first before you can accept payments.

Name	Description
STRIPE_SECRET_KEY	To accept payments. Get an API key from Stripe
STRIPE_PUBLIC_KEY
STRIPE_WEBHOOK_SECRET_KEY	endpoint is https://YourWebSite/api/payment/stripeConfirm

Security.

If your website is in a different location to your ComfyUI

Name	Description
COMFYUI_USERNAME	ComfyUI Basic auth user name if you're using the Basic auth custom node
COMFYUI_PASSWORD	ComfyUI Basic auth password
COMFYUI_URL	Where you have installed ComfyUI. default: http://127.0.0.1:8188

Debug

If anything goes wrong, in ComfyUI settings ▶ presentation ▶ restart button.

Also check that there aren't multiple node / nuxt process running on the same folder. Terminate them if needed.

If you are restarting a lot. The shortcut to the restart button is... (http://localhost:8188/custom_nodes/presentation-ComfyUI/restart)[http://localhost:8188/custom_nodes/presentation-ComfyUI/restart]

Public site

You can make your home computer's website accessible from the outside world via Cloudflare (Video Instructions)[https://youtu.be/KNeg4z9DhdY]

If you make a public site, tell me about it. There can be a directory later on. https://forms.gle/oqSXN4S1DAXU4ES79

You will need to add GUEST_ACCOUNT=guest_account for users who have not logged in. The files available to the guest account will be in outputs/guest_account.

Then add the client id + secret key to allow logins.

Payments

Your site has to be public & allow user logins to receive payments.

(Video Instructions)[https://youtu.be/QVol1DW0WYI]

Supports Stripe. Add the STRIPE\_... (environment variables)[#-env]. Restart. The payment link is https://YourWebSite/stripe?amount=3000 amount= is in cents.

Stripe's test card number is 4242 4242 4242 4242

Check the license of the models you're using first.

To add a new login type from nuxt-auth-tools

Add your login link in components/PresentationLogin.vue
Add a new file in server/api/auth/<authtype>.js

README.md