malkuthro
f8f8adf55d
* docs: use KForge spotlight and refresh guide showcases * docs: address guide showcase review polish * docs: fix auto-save showcase anchor
241 lines
12 KiB
HTML
241 lines
12 KiB
HTML
<!--
|
|
SPDX-FileCopyrightText: 2025-2026 Kforge Labs <https://github.com/malkuthro/ComfyUI-Koolook>
|
|
SPDX-License-Identifier: GPL-3.0-only
|
|
-->
|
|
<!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>Load, Quick Save, Save, Settings.</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 auto-save is newer than the saved version, Kforge Labs asks YES (load auto-save) or NO (load saved version). 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 → <project name> → 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>Settings</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>Rename or 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 also shows <strong>Recovery auto-saves</strong> for each 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. <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. Tag it with <code>Module</code> 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. <strong>Load</strong>, rename, retag, move between folders, or archive — all without leaving the sidebar.</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>
|
|
</main>
|
|
</body>
|
|
</html>
|