| |
| |
| |
| |
| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Kforge Labs Sidebar Guide</title> |
| <link rel="stylesheet" href="./guide.css"> |
| </head> |
| <body> |
| <header class="hero"> |
| <p class="eyebrow">Kforge Labs</p> |
| <h1>Use the sidebar as a project kit.</h1> |
| <p class="lead">Save the nodes, modules, workflows, tags, and snapshot state you need for a project, then load that setup again when the work comes back.</p> |
| </header> |
|
|
| <main> |
| <section class="section"> |
| <div class="section-copy"> |
| <p class="eyebrow">Start here</p> |
| <h2>The sidebar has six main areas.</h2> |
| <p>Snapshot, Tools, Search, Nodes, Workflows, and saved lists work together to keep each project kit easy to save, find, and reload.</p> |
| </div> |
| <figure class="visual"> |
| <div class="overview-map"> |
| <div class="overview-shot"> |
| <img src="./img/screenshots/sidebar-overview.png" alt="Kforge Labs sidebar overview screenshot"> |
| <span class="overview-box overview-snapshot" aria-hidden="true"></span> |
| <span class="overview-box overview-tools" aria-hidden="true"></span> |
| <span class="overview-box overview-search" aria-hidden="true"></span> |
| <span class="overview-box overview-nodes" aria-hidden="true"></span> |
| <span class="overview-box overview-workflows" aria-hidden="true"></span> |
| <span class="overview-box overview-saved" aria-hidden="true"></span> |
| </div> |
| <div class="overview-callouts" aria-label="Sidebar sections"> |
| <article class="overview-callout snapshot"> |
| <h3>Snapshot row</h3> |
| <p>Status, Load, Quick Save, Save.</p> |
| </article> |
| <article class="overview-callout tools"> |
| <h3>Tools row</h3> |
| <p>Maintenance plus the Help guide.</p> |
| </article> |
| <article class="overview-callout search"> |
| <h3>Search</h3> |
| <p>Find nodes, workflows, folders, and tags.</p> |
| </article> |
| <article class="overview-callout nodes"> |
| <h3>Nodes action bar</h3> |
| <p>Arrange nodes by Git repo name or theme, and add favorite nodes to the side panel.</p> |
| </article> |
| <article class="overview-callout workflows"> |
| <h3>Workflows action bar</h3> |
| <p>Save the entire canvas or selected nodes.</p> |
| </article> |
| <article class="overview-callout saved"> |
| <h3>Saved lists</h3> |
| <p>Nodes, Workflows, and Tags stay visible below.</p> |
| </article> |
| </div> |
| </div> |
| <figcaption>First read the sidebar from top to bottom: Snapshot, Tools, Search, Nodes, Workflows, Tags.</figcaption> |
| </figure> |
| </section> |
|
|
| <section class="band"> |
| <div> |
| <p class="eyebrow">Most important idea</p> |
| <h2>Snapshot saves the whole project kit.</h2> |
| </div> |
| <p>A snapshot saves your favorite nodes, workflows, modules, tags, and the current sidebar organization. Use one named snapshot per project, shot, client, or experiment.</p> |
| <figure class="visual full"> |
| <img src="./img/snapshot-flow.svg" alt="Snapshot flow from sidebar state to saved file to project library and later reload"> |
| </figure> |
| </section> |
|
|
| <section class="band band-text" id="two-layer-save"> |
| <div> |
| <p class="eyebrow">Two-layer save</p> |
| <h2>Save when you mean it. Auto-save catches the rest.</h2> |
| </div> |
| <p>Your named snapshot only changes when you click <strong>Save</strong> or <strong>Quick Save</strong>. Auto-save runs every 5 minutes in the background — but only when something has actually changed — and writes a separate recovery copy <span class="save-kind save-kind-periodic">PERIODIC</span> under <code><snapshot>_autosave/</code>. If you load a snapshot whose recovery copy is newer than the saved version, the Load dialog keeps both choices in view: <strong>NO - load saved</strong> or <strong>YES - load latest</strong>. At load time, Kforge Labs also creates a timestamped recovery copy of the kit being replaced <span class="save-kind save-kind-preload">PRE-LOAD_*</span> in that same <code><snapshot>_autosave/</code> folder, so you can restore it later from <code>Snapshot row → L (Load) → Recovery auto-saves</code>. See <a href="#showcase-auto-save-options">Showcase 2</a> below.</p> |
| </section> |
|
|
| <section class="section"> |
| <div class="section-copy"> |
| <p class="eyebrow">Project rhythm</p> |
| <h2>A simple workflow</h2> |
| <ol class="steps"> |
| <li>Load or create a snapshot, for example <strong>Client_Shot010</strong>.</li> |
| <li>Add favorite nodes while building the shot.</li> |
| <li>Save reusable node clusters as modules.</li> |
| <li>Quick Save during the session.</li> |
| <li>Save named snapshots for each project, shot, or task.</li> |
| <li>Load the right snapshot when you return.</li> |
| </ol> |
| </div> |
| <figure class="visual"> |
| <img src="./img/project-workflow.svg" alt="Six step project workflow for snapshots and modules"> |
| <figcaption>The goal is not to remember every button. The goal is to keep each project setup reusable.</figcaption> |
| </figure> |
| </section> |
|
|
| <section class="cards" aria-label="Main sidebar functions"> |
| <article> |
| <h3>Snapshots</h3> |
| <p>Save and reload the whole project kit.</p> |
| <ul class="function-list" aria-label="Snapshot functions"> |
| <li>Load</li> |
| <li>Quick Save</li> |
| <li>Save</li> |
| <li>Save to... / Load from...</li> |
| </ul> |
| </article> |
| <article> |
| <h3>Nodes</h3> |
| <p>Keep favorite nodes organized and easy to update.</p> |
| <ul class="function-list" aria-label="Node functions"> |
| <li>Search</li> |
| <li>Add</li> |
| <li>Remove</li> |
| <li>Smart view</li> |
| </ul> |
| </article> |
| <article> |
| <h3>Search</h3> |
| <p>Filter your curated kit by node, workflow, folder, or tag.</p> |
| <ul class="function-list" aria-label="Search functions"> |
| <li>Nodes</li> |
| <li>Workflows</li> |
| <li>Folders</li> |
| <li>Tags</li> |
| </ul> |
| </article> |
| <article> |
| <h3>Workflows</h3> |
| <p>Save full scripts or reusable node selections.</p> |
| <ul class="function-list" aria-label="Workflow functions"> |
| <li>Save script</li> |
| <li>Save selection</li> |
| <li>Load</li> |
| <li>Insert module</li> |
| </ul> |
| </article> |
| <article> |
| <h3>Smart organization</h3> |
| <p>Reshape your saved work folders, drag-drop, and move.</p> |
| <ul class="function-list" aria-label="Organization functions"> |
| <li>Create folders</li> |
| <li>Drag and drop</li> |
| <li>Move setups</li> |
| <li>Clean archive</li> |
| </ul> |
| </article> |
| </section> |
|
|
| <section class="showcases"> |
| <div class="section-copy wide"> |
| <p class="eyebrow">Visual recipes</p> |
| <h2>Common things you will do</h2> |
| </div> |
| <article class="showcase showcase-reverse"> |
| <div class="showcase-copy"> |
| <p class="eyebrow">Snapshot library</p> |
| <h3>Load a project kit when you return to a shot.</h3> |
| <p><strong>Load snapshot</strong> row restores that saved project kit. Use the named snapshot list when you want to switch projects, return to a shot, or reload a deliberate save. <span class="section-ref-note">See also: <a class="section-ref" href="#two-layer-save">TWO-LAYER SAVE</a></span></p> |
| </div> |
| <figure class="showcase-media"> |
| <img src="./img/screenshots/load-snapshot.png" alt="Load snapshot dialog showing saved snapshots and recovery autosaves"> |
| </figure> |
| </article> |
| <article class="showcase" id="showcase-auto-save-options"> |
| <div class="showcase-copy"> |
| <p class="eyebrow">Snapshot library · Auto-save options</p> |
| <h3>Save when you mean it. Auto-save catches the rest.</h3> |
| <p>The Load dialog shows <strong>Recovery auto-saves</strong> for the selected kit. <strong>Periodic</strong> is the latest background auto-save. <strong>Pre-load</strong> entries are timestamped copies made when another kit replaced this one. When the newest recovery copy is newer than the named save, choose <strong>NO - load saved</strong> or <strong>YES - load latest</strong>. <span class="section-ref-note">See also: <a class="section-ref" href="#two-layer-save">TWO-LAYER SAVE</a></span></p> |
| </div> |
| <figure class="showcase-media"> |
| <img src="./img/screenshots/auto-save-pre-load.png" alt="Recovery auto-saves section showing periodic and pre-load recovery entries"> |
| </figure> |
| </article> |
| <article class="showcase showcase-reverse"> |
| <div class="showcase-copy"> |
| <p class="eyebrow">Reusable modules</p> |
| <h3>Save selected nodes as a module.</h3> |
| <p><strong>Save</strong> saves the entire canvas under the workflows tree. <strong>Save selection</strong> stores only the selected canvas nodes. Use <strong>Save as module</strong> to insert it back into another canvas later.</p> |
| </div> |
| <figure class="showcase-media module-shot"> |
| <img src="./img/screenshots/all-icons-new.png" alt="Sidebar toolbar screenshot with workflow save-selection highlighted"> |
| <span class="focus-dot focus-module" aria-hidden="true"></span> |
| </figure> |
| </article> |
| <article class="showcase"> |
| <div class="showcase-copy"> |
| <p class="eyebrow">Tags</p> |
| <h3>Give saved workflows another way to show up.</h3> |
| <p>Add <strong>tags</strong> to saved workflows and modules so the same item can appear under more than one useful label. A module can live in its folder, show up under Tags, and still be found from Search.</p> |
| </div> |
| <figure class="showcase-media tags-shot"> |
| <img src="./img/screenshots/add-tags.png" alt="Tags modal showing current tags and an Add tag field"> |
| <img src="./img/screenshots/inventory-tags.png" alt="Sidebar Tags section showing module, UP-scale, and Wan 22 tag folders"> |
| </figure> |
| </article> |
| <article class="showcase showcase-reverse"> |
| <div class="showcase-copy"> |
| <p class="eyebrow">Search</p> |
| <h3>Find useful favorites faster.</h3> |
| <p>Search inside the kit you already curated: verified <strong>nodes</strong>, saved <strong>workflows</strong>, <strong>folders</strong>, and <strong>tags</strong> arranged your way. You do not need the full exact name — type <strong>the part you remember</strong> and it filters across those layers.</p> |
| </div> |
| <figure class="showcase-media portrait-shot"> |
| <img src="./img/screenshots/search-C.png" alt="Search results showing matching favorite nodes"> |
| </figure> |
| </article> |
| <article class="showcase"> |
| <div class="showcase-copy"> |
| <p class="eyebrow">Context actions</p> |
| <h3>Manage saved workflows from the sidebar.</h3> |
| <p><strong>Right-click</strong> any saved workflow or module for a full action menu. Use <strong class="workflow-update-callout">Update from selection or canvas</strong> to refresh an existing saved workflow without recreating it. You can also load, insert, rename, retag, duplicate, archive, delete, or create a new destination folder from the menu. Right-click an Archive folder to clean up older duplicate backups; the cleanup groups them by original setup name and keeps the newest versions from the last 5 minutes, last hour, and last day for each group. Drag workflows onto existing folders to move them there.</p> |
| </div> |
| <figure class="showcase-media portrait-shot"> |
| <img src="./img/screenshots/right-click-functions.png" alt="Right-click context menu on a saved workflow showing available actions"> |
| </figure> |
| </article> |
| <article class="showcase showcase-reverse"> |
| <div class="showcase-copy"> |
| <p class="eyebrow">Folder organization</p> |
| <h3>Shape the library around the way you work.</h3> |
| <p><strong>Create</strong> or <strong>delete</strong> folders to shape your library. <strong>Drag and drop</strong> to rearrange items between folders, then group, rename, or rearrange anytime.</p> |
| </div> |
| <figure class="showcase-media"> |
| <img src="./img/screenshots/folder-actions.png" alt="Sidebar showing folder actions — create, rename, delete, drag-and-drop"> |
| </figure> |
| </article> |
| </section> |
|
|
| <section class="showcases snapshot-transfer" id="snapshot-transfer"> |
| <div class="section-copy wide"> |
| <p class="eyebrow">Snapshot transfer</p> |
| <h2>Move useful pieces between project kits.</h2> |
| </div> |
| <article class="showcase showcase-reverse"> |
| <div class="showcase-copy"> |
| <p class="eyebrow">Compare mode</p> |
| <h3>Load another snapshot beside your current kit.</h3> |
| <p>Use <strong>A/B</strong> compare when you want to borrow nodes, workflows, folders, or tags from another saved kit without replacing your current one. The left side is your editable target; the right side is the source snapshot you are inspecting.</p> |
| </div> |
| <figure class="showcase-media"> |
| <img src="./img/screenshots/snapshot-transfer-compare.png" alt="Snapshot compare view showing the current kit beside another saved snapshot"> |
| </figure> |
| </article> |
| <article class="showcase"> |
| <div class="showcase-copy"> |
| <p class="eyebrow">Find what changed</p> |
| <h3>Expand the source snapshot and review the green/red hints.</h3> |
| <p>Green rows exist only in the source snapshot. Red rows already exist in both places but differ. Use those color hints to decide what is worth copying before you touch your live kit.</p> |
| </div> |
| <figure class="showcase-media"> |
| <img src="./img/screenshots/snapshot-transfer-expanded.png" alt="Snapshot compare view expanded to show new and modified source items"> |
| </figure> |
| </article> |
| <article class="showcase showcase-reverse"> |
| <div class="showcase-copy"> |
| <p class="eyebrow">Copy folders</p> |
| <h3>Right-click a source folder to copy its contents into your kit.</h3> |
| <p>Copying a folder keeps its path, creates missing folders, skips identical workflows, and keeps both copies when the same workflow name has different content. That makes it useful for pulling a whole publish set or module group across in one action.</p> |
| </div> |
| <figure class="showcase-media portrait-shot"> |
| <img src="./img/screenshots/snapshot-transfer-copy-folder.png" alt="Snapshot compare context menu showing Copy folder to the target kit"> |
| </figure> |
| </article> |
| <article class="showcase"> |
| <div class="showcase-copy"> |
| <p class="eyebrow">Return to normal</p> |
| <h3>After copying, your kit stays the one that saves.</h3> |
| <p>Compare mode is for review and transfer. When you leave it, the sidebar returns to the normal saved-kit view, and your current kit keeps the items you copied in.</p> |
| </div> |
| <figure class="showcase-media snapshot-transfer-small"> |
| <img src="./img/screenshots/snapshot-transfer-finished.png" alt="Normal sidebar saved-kit view after snapshot transfer"> |
| </figure> |
| </article> |
| </section> |
|
|
| <section class="band band-text support-band" id="support"> |
| <div> |
| <p class="eyebrow">Support</p> |
| <h2>Need help or found a bug?</h2> |
| </div> |
| <p>First try the recovery paths in this guide: restart ComfyUI after installs, use <strong>Tools → Install missing packs</strong> for missing custom nodes, and check <strong>Snapshot → Load → Recovery auto-saves</strong> when a saved kit looks older than expected. If the problem is still reproducible, open a GitHub issue and include your ComfyUI version, Koolook version, install method, terminal log, browser console errors, and steps to reproduce. <a class="guide-link" href="https://github.com/malkuthro/ComfyUI-Koolook/blob/main/SUPPORT.md" target="_blank" rel="noopener noreferrer">Read the report checklist</a>.</p> |
| </section> |
| </main> |
| </body> |
| </html> |
|
|
