Nodes/Presentation ComfyUI/Presentation Image
ComfyUI Node

Presentation Image

A file picker that keeps people out of your graph

By niknah·Created 11 months ago·Updated 4 months ago· 5
Presentation Image
    • filename
    pathoutput
    regex\.(png|avif|gif|jpg|bmp|webp)$
    value

    If you've ever wanted to hand someone a ComfyUI workflow and have them only touch a couple of inputs - pick an image, hit go - this is the node. Presentation Image is the "choose your input image" control for the generated website this pack produces. Someone who has never seen a node graph gets a dropdown full of files from your output folder, picks one, and the workflow runs with it. You built the pipeline; they just steer it.

    This is the pack's whole trick, and it's worth understanding once. niknah's Presentation ComfyUI turns a workflow into a Nuxt/Vue website that looks closer to A1111 or Forge than to a node graph - a category of thing the community has wanted for years, given how much of the frustration with ComfyUI is the "blank canvas of cryptic nodes" beginner wall (the KB's ecosystem essay is basically a catalog of that complaint). You build the complex graph; the site is what everyone else sees.

    How it works

    The node itself is almost embarrassingly small: PresentationImage is a subclass of PresentationFile that only overrides the default regex to \.(png|avif|gif|jpg|bmp|webp)$. The Python pickfile method just returns the value string you give it. All the real work happens in the generated site - its files API walks the folder you pointed at, recursively, matching your regex, and renders the results as a picker. Whatever file the user chooses gets written back into the workflow JSON, and the node's output flows into the graph like any other value.

    The inputs that matter

    • path (default output) - which ComfyUI folder to browse. The tooltip spells it out: anything defined in folder_paths.py - input, output, checkpoints, loras, vae, text_encoders, diffusion_models, clip_vision, diffusers, upscale_models. In multi-user mode each user's files live in output/<username>.
    • regex - a regex filter for filenames, already set to image extensions. Want only PNGs? \.png$.
    • value - the default file, shown as pre-selected.

    Output: filename (wildcard type). Wire it into anything that reads an image path - LoadImage, or a node that takes a file string. That wildcard * means ComfyUI won't complain about where you connect it.

    How to install it

    The whole pack installs together. ComfyUI Manager, search "Presentation ComfyUI", or:

    cd ComfyUI/custom_nodes
    git clone https://github.com/niknah/presentation-ComfyUI
    

    then restart. You also need Node.js installed separately - the README links nodejs.org, and it's a hard requirement, not a suggestion. First launch copies a Nuxt project to output/presentation-site and runs npm install; that's the few-minute wait. The site comes up at http://localhost:3000.

    Common issues & troubleshooting

    The picker shows the wrong folder. path is resolved against ComfyUI's folder paths, so output is the generated-images folder, not your Downloads. Point it at input if that's where you drop source images.

    Nothing matches / everything matches. regex is a real regex. The default for the generic PresentationFile is "." which matches everything; here it's already the image list, but if you override it and "see nothing," your pattern probably needs escaping - \.(png|jpg)$, not .(png|jpg)$.

    Site acting weird after a workflow change. Settings → Presentation → Restart (or Rebuild). Also check you don't have two nuxt processes running on the same folder - the README calls that out specifically.

    Don't expose it bare to the internet. The pack runs a local web server on port 3000 and talks to ComfyUI's API, which is unauthenticated by default. If you want this reachable outside your house, follow the README's Cloudflare + basic-auth notes, not just the open port.

    CategoryPresentation

    Inputs (3)

    NameTypeDefaultDescription
    pathSTRINGoutputCan be anything defined in folder_paths.py. input, output, checkpoints, loras, vae, text_encoders, diffusion_models, clip_vision, diffusers, upscale_models
    regexoptSTRING\.(png|avif|gif|jpg|bmp|webp)$Example: \.(gif|png|webp)$
    valueoptSTRINGDefault file

    Outputs (1)

    NameTypeDescription
    filename*