138 lines
3.6 KiB
Markdown
138 lines
3.6 KiB
Markdown
# AF Enhanced HTML Node - Usage Guide
|
||
|
||
A ComfyUI Note node with html capabilities. Create notes, UI's and ReadMe's directly inside the workflow, using html.
|
||
|
||
## Basic Section Colors
|
||
|
||
```html
|
||
<!-- Positive section (green) -->
|
||
<div class="af-section af-positive">
|
||
<h2>🟢 Positive Prompts</h2>
|
||
<p>Your positive prompts go here...</p>
|
||
</div>
|
||
|
||
<!-- Negative section (red) -->
|
||
<div class="af-section af-negative">
|
||
<h2>🔴 Negative Prompts</h2>
|
||
<p>Your negative prompts go here...</p>
|
||
</div>
|
||
|
||
<!-- Neutral section (gray) -->
|
||
<div class="af-section af-neutral">
|
||
<h3>📝 Notes</h3>
|
||
<p>General notes and information...</p>
|
||
</div>
|
||
|
||
<!-- Info section (blue) -->
|
||
<div class="af-section af-info">
|
||
<h3>ℹ️ Information</h3>
|
||
<p>Important information...</p>
|
||
</div>
|
||
|
||
<!-- Warning section (yellow) -->
|
||
<div class="af-section af-warning">
|
||
<h3>⚠️ Warning</h3>
|
||
<p>Warning or caution messages...</p>
|
||
</div>
|
||
|
||
<!-- Custom section (purple) -->
|
||
<div class="af-section af-custom">
|
||
<h3>🎨 Custom</h3>
|
||
<p>Custom styled content...</p>
|
||
</div>
|
||
```
|
||
|
||
## Spacers
|
||
|
||
```html
|
||
<!-- Small spacer -->
|
||
<div class="af-spacer-small"></div>
|
||
|
||
<!-- Regular spacer -->
|
||
<div class="af-spacer"></div>
|
||
|
||
<!-- Large spacer -->
|
||
<div class="af-spacer-large"></div>
|
||
|
||
<!-- Extra large spacer -->
|
||
<div class="af-spacer-xl"></div>
|
||
```
|
||
|
||
## Clickable Links
|
||
|
||
```html
|
||
<!-- External link -->
|
||
<a href="https://github.com/comfyanonymous/ComfyUI" target="_blank">ComfyUI GitHub</a>
|
||
|
||
<!-- Link with custom action -->
|
||
<a href="#" onclick="alert('Custom action triggered!')">Click for alert</a>
|
||
|
||
<!-- Link with data attribute for custom handling -->
|
||
<a href="#" data-action="custom-command">Custom Command</a>
|
||
```
|
||
|
||
## Complete Example Template
|
||
|
||
```html
|
||
<div class="af-section af-positive">
|
||
<h2>🟢 Positive Prompts</h2>
|
||
<p>masterpiece, best quality, highly detailed</p>
|
||
<ul>
|
||
<li>Professional lighting</li>
|
||
<li>Sharp focus</li>
|
||
<li>8K resolution</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="af-spacer"></div>
|
||
|
||
<div class="af-section af-negative">
|
||
<h2>🔴 Negative Prompts</h2>
|
||
<p>low quality, blurry, distorted</p>
|
||
<code>nsfw, watermark, signature</code>
|
||
</div>
|
||
|
||
<div class="af-spacer-large"></div>
|
||
|
||
<div class="af-section af-info">
|
||
<h3>ℹ️ Model Information</h3>
|
||
<p>Using: <strong>SDXL 1.0</strong></p>
|
||
<p>Steps: <em>25</em> | CFG: <em>7.5</em></p>
|
||
<a href="https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0" target="_blank">Model Page</a>
|
||
</div>
|
||
|
||
<div class="af-spacer"></div>
|
||
|
||
<div class="af-section af-neutral">
|
||
<h3>📝 Notes</h3>
|
||
<p>Remember to:</p>
|
||
<ol>
|
||
<li>Check image dimensions</li>
|
||
<li>Adjust sampling method</li>
|
||
<li>Fine-tune CFG scale</li>
|
||
</ol>
|
||
<hr>
|
||
<p><small>Last updated: Today</small></p>
|
||
</div>
|
||
```
|
||
|
||
## Features
|
||
|
||
- **No external dependencies** - All CSS is inlined to avoid loading issues
|
||
- **Colored sections** - 6 predefined color schemes (positive, negative, neutral, info, warning, custom)
|
||
- **Flexible spacers** - 4 different spacer sizes
|
||
- **Clickable links** - Support for external links and custom actions
|
||
- **Responsive design** - Works on different screen sizes
|
||
- **HTML support** - Full HTML formatting (lists, tables, code blocks, etc.)
|
||
- **Custom scrollbars** - Styled to match ComfyUI theme
|
||
|
||
## Installation
|
||
|
||
1. Create folder: `ComfyUI/custom_nodes/ComfyUI-AF_Enhanced_HTML/`
|
||
2. Add the Python file: `AF_Enhanced_HTML.py`
|
||
3. Add the init file: `__init__.py`
|
||
4. Create `web/` subfolder
|
||
5. Add the JavaScript file: `web/AF_Enhanced_HTML.js`
|
||
6. Restart ComfyUI
|
||
7. Find the node under **AF > AF - Enhanced HTML**
|