Updated the README++
- Updated the README - Added style examples - Updated the default node content EXTRA !! - Added an html containing the HELP section of my SDXL Workflow (this will probably move to the workflow repo, once I upload it.)
This commit is contained in:
+150
@@ -0,0 +1,150 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AF - SDXL Workflow - Help-A</title>
|
||||
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="af-html-note-container">
|
||||
<div class="af-html-note-content">
|
||||
<!-- THIS CONTENT TO JS FILE -->
|
||||
|
||||
<div style="height: 3px;"></div>
|
||||
|
||||
<div class="af-section af-positive">
|
||||
<h2>🟢 Generated Positive Global Prompt</h2>
|
||||
<p>If you use any of the prompt generators ( [A], [B], [C], [D], [E] )<br/>
|
||||
the genertaed prompt will be sent to this widget.<br/><br/>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style="height: 12px;"></div>
|
||||
|
||||
<div class="af-section af-positive">
|
||||
<h2>🟢 Manual Positive Global Prompt</h2>
|
||||
<p>You can either write your own prompt, or use a generated prompt.<br/>
|
||||
To use the generated prompt without editing, leave this widget empty.<br/>
|
||||
If you wish to edit the generated prompt, click the "Copy Generated Prompt for Editing" button.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style="height: 2px;"></div>
|
||||
|
||||
<div class="af-section af-neutral">
|
||||
<p>Button to copy and edit the generated prompt.<p>
|
||||
</div>
|
||||
|
||||
<div style="height: 65px;"></div>
|
||||
|
||||
<div class="af-section af-negative">
|
||||
<h2>🔴 Generated Negative Global Prompt</h2>
|
||||
<p>Your generated negative prompt will be sent to this widget (same as above).</p>
|
||||
</div>
|
||||
|
||||
<div style="height: 10px;"></div>
|
||||
|
||||
<div class="af-section af-negative">
|
||||
<h2>🔴 Manual Negative Global Prompt</h2>
|
||||
<p>Here you can either enter a rompt manually, or copy the generated to edit (same as above).</p>
|
||||
</div>
|
||||
|
||||
<div style="height: 2px;"></div>
|
||||
|
||||
<div class="af-section af-neutral">
|
||||
<p>Button to copy and edit the generated prompt.<p>
|
||||
</div>
|
||||
|
||||
<div style="height: 170px;"></div>
|
||||
|
||||
<div class="af-section af-positive">
|
||||
<h2>🟢 Generated Positive Local Prompt</h2>
|
||||
<p>Same as above. <strong>BUT</strong> make sure to set "5. Plain Prompt OR TextEncoded Prompt" to true for this prompt to take effect !!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style="height: 10px;"></div>
|
||||
|
||||
<div class="af-section af-positive">
|
||||
<h2>🟢 Manual Positive Local Prompt</h2>
|
||||
<p>Here you can either enter a rompt manually, or copy the generated to edit (same as above).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style="height: 2px;"></div>
|
||||
|
||||
<div class="af-section af-neutral">
|
||||
<p>Button to copy and edit the generated prompt.<p>
|
||||
</div>
|
||||
|
||||
<div style="height: 152px;"></div>
|
||||
|
||||
<div class="af-section af-blue">
|
||||
<h2>Styles Drop-Down's</h2>
|
||||
<p>Here you can choose up to four styles that will be applied.</p>
|
||||
</div>
|
||||
|
||||
<div style="height: 2px;"></div>
|
||||
|
||||
<div class="af-section af-neutral">
|
||||
<p>Button to copy and edit the generated prompt.<p>
|
||||
</div>
|
||||
|
||||
<div style="height: 350px;"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="af-column-half-left af-section af-positive">
|
||||
<h2>Positive Prompt Text Encoding</h2>
|
||||
<p>The CLIP Text Encode SDXL node encodes text prompts into SDXL-compatible conditioning embeddings using a dual CLIP encoder system, while incorporating image dimensions, crop, and target parameters to provide spatial context for the diffusion model.<br/><br/>
|
||||
In other words, it can improve your image creation.<br/><br/>
|
||||
<a href="https://docs.comfy.org/built-in-nodes/ClipTextEncodeSdxl">ComyUI manual page</a></p>
|
||||
</div>
|
||||
<div class="af-column-half-right af-section af-negative">
|
||||
<h2>Negative Prompt Text Encoding</h2>
|
||||
<p>The same as on the positive Prompt Text Encode<br/><br/><br/><br/><br/><br/><br/><br/><br/></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height: 126px;"></div>
|
||||
|
||||
<div class="af-section af-blue">
|
||||
<h2>Plain Prompt, OR Text Encoded Prompt (Subgraph)</h2>
|
||||
<p>Here you can choose if you want to use the plain prompt, or the Text Encoded Prompt.<br/><br/>
|
||||
If you choose to use the <strong>plain prompt (false)</strong>, it means that the <strong>local prompts</strong> will be ignored and the prompt will not be text encoded !!</p>
|
||||
</div>
|
||||
|
||||
<div style="height: 225px;"></div>
|
||||
|
||||
<div class="af-section af-yellow">
|
||||
<h2>Save that hard earned prompting</h2>
|
||||
<p>Here you can choose setup the <strong>Folder</strong and the <strong>File Name</strong> of the .csv file that will store all your prompts.<br/>
|
||||
Additionally you can also define a <strong>Project Name</strong>, which will let you identify the relevant prompts later.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="af-section af-neutral">
|
||||
<h3>📝 Notes</h3>
|
||||
<p>Additional notes and information...</p>
|
||||
<ul>
|
||||
<li>Item 1</li>
|
||||
<li>Item 2</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- END THIS CONTENT TO JS FILE -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
+416
@@ -0,0 +1,416 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AF - Enhanced HTML Note - Default Content</title>
|
||||
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
|
||||
|
||||
</head>
|
||||
<body style="background-color: #2a2a2a;">
|
||||
|
||||
<div class="af-html-note-container">
|
||||
<div class="af-html-note-content">
|
||||
<!-- THIS CONTENT TO JS FILE -->
|
||||
|
||||
<h1>Predefined Section Colors</h1>
|
||||
<h2>Positive Prompt Section</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div class="af-section af-positive">
|
||||
<h2>🟢 Positive Prompts</h2>
|
||||
<p><strong>masterpiece, best quality, highly detailed</strong></p>
|
||||
<ul>
|
||||
<li>Professional lighting</li>
|
||||
<li>Sharp focus</li>
|
||||
<li>8K resolution</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Negative Prompt Section</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div class="af-section af-negative">
|
||||
<h2>🔴 Negative Prompts</h2>
|
||||
<p><em>low quality, blurry, distorted</em></p>
|
||||
<p><code>nsfw, watermark, signature, bad anatomy</code></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Neutral Prompt Section</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div class="af-section af-neutral">
|
||||
<h3>📝 Notes</h3>
|
||||
<p>General notes and information...</p>
|
||||
<ul>
|
||||
<li>Item 1</li>
|
||||
<li>Item 2</li>
|
||||
<li>Item 3</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Info Section</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div class="af-section af-info">
|
||||
<h3>ℹ️ Information</h3>
|
||||
<p>Using: <strong>SDXL 1.0</strong></p>
|
||||
<p>Steps: <code>25</code> | CFG: <code>7.5</code> | Sampler: <code>DPM++ 2M Karras</code></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Warning Section</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div class="af-section af-warning">
|
||||
<h3>⚠️ Warning</h3>
|
||||
<p>This workflow requires:</p>
|
||||
<ol>
|
||||
<li>High VRAM (8GB+)</li>
|
||||
<li>Latest ComfyUI version</li>
|
||||
<li>SDXL compatible models</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Yellow Section</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div class="af-section af-yellow">
|
||||
<h3>💛 Yellow Section</h3>
|
||||
<p>Alternative yellow styled content with different shade...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Blue Section</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div class="af-section af-blue">
|
||||
<h3>🔵 Blue Section</h3>
|
||||
<p>Deep blue styled content for technical information...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Custom Section</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div class="af-section af-custom">
|
||||
<h3>🎨 Custom</h3>
|
||||
<p>Purple custom styled content for special cases...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>Predefined Spacers</h1>
|
||||
<h2>Top spacer (2px)</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div class="af-spacer-top"></div>
|
||||
|
||||
<div class="af-section af-negative">Content Block 1</div>
|
||||
</div>
|
||||
|
||||
<h2>Mini spacer (4px)</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div class="af-spacer-mini"></div>
|
||||
|
||||
<div class="af-section af-neutral">Content Block 2</div>
|
||||
</div>
|
||||
|
||||
<h2>Small spacer (8px)</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div class="af-spacer-small"></div>
|
||||
|
||||
<div class="af-section af-info">Content Block 3</div>
|
||||
</div>
|
||||
|
||||
<h2>Regular spacer (16px)</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div class="af-spacer"></div>
|
||||
|
||||
<div class="af-section af-warning">Content Block 4</div>
|
||||
</div>
|
||||
|
||||
<h2>Large spacer (32px)</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div class="af-spacer-large"></div>
|
||||
|
||||
<div class="af-section af-custom">Content Block 5</div>
|
||||
</div>
|
||||
|
||||
<h2>Extra large spacer (48px)</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div class="af-spacer-xl"></div>
|
||||
|
||||
<div class="af-section af-blue">Content Block 6</div>
|
||||
</div>
|
||||
|
||||
<h2>Column Layouts</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div class="row">
|
||||
<div class="af-column-half-left">
|
||||
<div class="af-section af-positive">
|
||||
<h3>🎨 Style Settings</h3>
|
||||
<ul>
|
||||
<li>Style: Photorealistic</li>
|
||||
<li>Aspect: 16:9</li>
|
||||
<li>Quality: Ultra High</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="af-spacer"></div>
|
||||
|
||||
<div class="af-section af-info">
|
||||
<h3>⚙️ Technical</h3>
|
||||
<p>Resolution: <code>1920x1080</code></p>
|
||||
<p>Batch: <code>4</code></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="af-column-half-right">
|
||||
<div class="af-section af-negative">
|
||||
<h3>🚫 Exclusions</h3>
|
||||
<ul>
|
||||
<li>No text in image</li>
|
||||
<li>Avoid oversaturation</li>
|
||||
<li>No watermarks</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="af-spacer"></div>
|
||||
|
||||
<div class="af-section af-warning">
|
||||
<h3>💡 Tips</h3>
|
||||
<p>Use lower CFG for more creative results</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Clickable Links & Actions</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div class="af-section af-info">
|
||||
<h3>🔗 Interactive Links</h3>
|
||||
|
||||
<!-- External link (opens in new tab with Ctrl+click) -->
|
||||
<p><a href="https://github.com/comfyanonymous/ComfyUI">ComfyUI GitHub Repository</a></p>
|
||||
|
||||
<!-- Alert action (triggers with Ctrl+click) -->
|
||||
<p><a href="#" onclick="alert('Custom action triggered!')">Click for alert</a></p>
|
||||
|
||||
<!-- Console log action -->
|
||||
<p><a href="#" onclick="console.log('Debug message logged')">Log to console</a></p>
|
||||
|
||||
<!-- Multiple actions -->
|
||||
<p><a href="https://example.com" onclick="console.log('Link clicked')">Link with logging</a></p>
|
||||
|
||||
<!-- JavaScript links -->
|
||||
<p><a href="javascript:alert('Hello from JavaScript!')">JavaScript alert link</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Custom Styling Examples</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div class="af-section af-positive">First Section</div>
|
||||
|
||||
<h2>Custom 12px spacer</h2>
|
||||
<div style="height: 12px;"></div>
|
||||
|
||||
<div class="af-section af-negative">Second Section</div>
|
||||
|
||||
<h2>Custom 24px spacer</h2>
|
||||
<div style="height: 24px;"></div>
|
||||
|
||||
<div class="af-section af-info">Third Section</div>
|
||||
|
||||
<h2>Custom 50px spacer</h2>
|
||||
<div style="height: 50px;"></div>
|
||||
|
||||
<div class="af-section af-warning">Fourth Section</div>
|
||||
</div>
|
||||
|
||||
<h1>Custom Color Sections</h1>
|
||||
<h2>Custom pink section</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div style="background: rgba(255, 100, 150, 0.1); border-left: 4px solid #ff6496; padding: 12px; border-radius: 6px; margin: 8px 0;">
|
||||
<h3 style="color: #ff6496; margin-top: 0;">Custom Pink Section</h3>
|
||||
<p>Your content here with custom colors...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Custom teal section</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div style="background: rgba(64, 224, 208, 0.1); border-left: 4px solid #40E0D0; padding: 12px; border-radius: 6px; margin: 8px 0;">
|
||||
<h3 style="color: #40E0D0; margin-top: 0;">Custom Teal Section</h3>
|
||||
<p>Different color scheme for variety...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Custom orange section</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div style="background: rgba(255, 165, 0, 0.1); border-left: 4px solid #FFA500; padding: 12px; border-radius: 6px; margin: 8px 0;">
|
||||
<h3 style="color: #FFA500; margin-top: 0;">Custom Orange Section</h3>
|
||||
<p>Create any color combination you need...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Text Examples</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div class="af-section af-neutral">
|
||||
<!-- Large blue bold text -->
|
||||
<p style="font-size: 18px; color: #58a6ff; font-weight: bold;">
|
||||
Large blue bold text for emphasis
|
||||
</p>
|
||||
|
||||
<!-- Small gray italic text -->
|
||||
<p style="font-size: 12px; color: #888; font-style: italic;">
|
||||
Small gray italic text for subtitles
|
||||
</p>
|
||||
|
||||
<!-- Highlighted text -->
|
||||
<p style="background: rgba(255, 255, 0, 0.2); padding: 4px 8px; border-radius: 3px;">
|
||||
Highlighted text with yellow background
|
||||
</p>
|
||||
|
||||
<!-- Custom monospace -->
|
||||
<p style="font-family: 'Courier New', monospace; color: #90EE90; background: rgba(0,0,0,0.4); padding: 8px; border-radius: 4px;">
|
||||
Custom monospace text for code-like display
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>Custom Border Sections</h1>
|
||||
<h2>Dashed border box</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div style="border: 2px dashed #90EE90; padding: 16px; margin: 10px 0; background: rgba(0, 0, 0, 0.2); border-radius: 8px;">
|
||||
<p><strong>Dashed Border Box</strong></p>
|
||||
<p>Content in a custom dashed border box</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Solid border with shadow effect</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div style="border: 2px solid #58a6ff; padding: 16px; margin: 10px 0; background: rgba(88, 166, 255, 0.05); box-shadow: 0 4px 8px rgba(0,0,0,0.3); border-radius: 8px;">
|
||||
<p><strong>Solid Border with Shadow</strong></p>
|
||||
<p>Creates depth with shadow effect</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Thick left border</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div style="border-left: 8px solid #BA55D3; padding: 16px; margin: 10px 0; background: rgba(186, 85, 211, 0.1);">
|
||||
<p><strong>Thick Left Border</strong></p>
|
||||
<p>Emphasizes content with thick accent border</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>Align Content</h1>
|
||||
<h2>Centered content</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div style="text-align: center; padding: 20px; background: rgba(255,255,255,0.05); border-radius: 8px; margin: 10px 0;">
|
||||
<h2 style="margin: 0 0 12px 0;">Centered Title</h2>
|
||||
<p style="margin: 0;">Centered paragraph text for announcements</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Right-aligned content</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div style="text-align: right; padding: 10px; border-top: 1px solid #555; margin-top: 20px;">
|
||||
<small style="color: #888;">Right-aligned footer note</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Flex layout for inline elements</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div style="display: flex; gap: 10px; align-items: center; padding: 12px; background: rgba(0,0,0,0.2); border-radius: 6px;">
|
||||
<span style="background: #90EE90; color: #000; padding: 4px 8px; border-radius: 4px; font-weight: bold;">Tag 1</span>
|
||||
<span style="background: #58a6ff; color: #fff; padding: 4px 8px; border-radius: 4px; font-weight: bold;">Tag 2</span>
|
||||
<span style="background: #FFA500; color: #fff; padding: 4px 8px; border-radius: 4px; font-weight: bold;">Tag 3</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Custom Info Cards</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
|
||||
<div style="flex: 1; min-width: 150px; background: rgba(144, 238, 144, 0.1); border: 1px solid #90EE90; padding: 12px; border-radius: 6px; text-align: center;">
|
||||
<strong style="color: #90EE90; display: block; margin-bottom: 4px;">Steps</strong>
|
||||
<p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">25</p>
|
||||
</div>
|
||||
|
||||
<div style="flex: 1; min-width: 150px; background: rgba(135, 206, 235, 0.1); border: 1px solid #87CEEB; padding: 12px; border-radius: 6px; text-align: center;">
|
||||
<strong style="color: #87CEEB; display: block; margin-bottom: 4px;">CFG Scale</strong>
|
||||
<p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">7.5</p>
|
||||
</div>
|
||||
|
||||
<div style="flex: 1; min-width: 150px; background: rgba(186, 85, 211, 0.1); border: 1px solid #BA55D3; padding: 12px; border-radius: 6px; text-align: center;">
|
||||
<strong style="color: #BA55D3; display: block; margin-bottom: 4px;">Batch Size</strong>
|
||||
<p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">4</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Complete Workflow Example</h2>
|
||||
<div style="border: 1px solid #808080; padding: 8px; border-radius: 6px; margin: 8px 0;">
|
||||
<div class="af-section af-positive">
|
||||
<h2>🟢 Positive Prompts</h2>
|
||||
<p><strong>masterpiece, best quality, highly detailed, 8k uhd, professional photography</strong></p>
|
||||
<ul>
|
||||
<li>Professional lighting and composition</li>
|
||||
<li>Sharp focus with bokeh background</li>
|
||||
<li>Photorealistic textures and materials</li>
|
||||
<li>Award-winning cinematography</li>
|
||||
</ul>
|
||||
<a href="#" onclick="alert('Positive prompts copied to clipboard!')">📋 Copy Prompts</a>
|
||||
</div>
|
||||
|
||||
<div class="af-spacer"></div>
|
||||
|
||||
<div class="af-section af-negative">
|
||||
<h2>🔴 Negative Prompts</h2>
|
||||
<p><em>low quality, worst quality, blurry, out of focus</em></p>
|
||||
<p><code>nsfw, watermark, signature, text, bad anatomy, deformed, ugly, mutation</code></p>
|
||||
</div>
|
||||
|
||||
<div class="af-spacer-large"></div>
|
||||
|
||||
<div class="af-section af-info">
|
||||
<h3>ℹ️ Model Information</h3>
|
||||
<p>Model: <strong>SDXL 1.0 Base</strong></p>
|
||||
<p>Settings: Steps <code>25</code> | CFG <code>7.5</code> | Sampler <code>DPM++ 2M Karras</code></p>
|
||||
<p>Resolution: <code>1024x1024</code> | Batch Size: <code>4</code></p>
|
||||
<a href="https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0">📦 Model Page</a>
|
||||
</div>
|
||||
|
||||
<div class="af-spacer"></div>
|
||||
|
||||
<div class="af-section af-warning">
|
||||
<h3>⚠️ System Requirements</h3>
|
||||
<p>This workflow requires:</p>
|
||||
<ol>
|
||||
<li>GPU with 8GB+ VRAM (12GB recommended)</li>
|
||||
<li>ComfyUI latest version</li>
|
||||
<li>SDXL compatible checkpoint</li>
|
||||
<li>Required custom nodes installed</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="af-spacer"></div>
|
||||
|
||||
<div class="af-section af-neutral">
|
||||
<h3>📝 Workflow Notes</h3>
|
||||
<p><strong>Tips for best results:</strong></p>
|
||||
<ul>
|
||||
<li>Verify image dimensions before generating</li>
|
||||
<li>Lower CFG (6-7) for more creative interpretations</li>
|
||||
<li>Higher CFG (8-10) for more prompt adherence</li>
|
||||
<li>Save your workflow frequently!</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p><small>Last updated: 2025-01-15 | Created with AF Enhanced HTML Node v0.0.5</small></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- END THIS CONTENT TO JS FILE -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
+153
@@ -0,0 +1,153 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AF - Enhanced HTML Note - Default Content</title>
|
||||
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
|
||||
|
||||
</head>
|
||||
<body style="background-color: #2a2a2a;">
|
||||
|
||||
<div class="af-html-note-container">
|
||||
<div class="af-html-note-content">
|
||||
<!-- BEGINNING: THIS CONTENT TO MAIN.PY FILE -->
|
||||
|
||||
|
||||
|
||||
<h2>Positive Prompt Section</h2>
|
||||
<div class="af-section af-positive">
|
||||
<h2>🟢 Positive Prompts</h2>
|
||||
<p><strong>masterpiece, best quality, highly detailed</strong></p>
|
||||
<ul>
|
||||
<li>Professional lighting</li>
|
||||
<li>Sharp focus</li>
|
||||
<li>8K resolution</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Negative Prompt Section</h2>
|
||||
<div class="af-section af-negative">
|
||||
<h2>🔴 Negative Prompts</h2>
|
||||
<p><em>low quality, blurry, distorted</em></p>
|
||||
<p><code>nsfw, watermark, signature, bad anatomy</code></p>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Neutral Prompt Section</h2>
|
||||
<div class="af-section af-neutral">
|
||||
<h3>📝 Notes</h3>
|
||||
<p>General notes and information...</p>
|
||||
<ul>
|
||||
<li>Item 1</li>
|
||||
<li>Item 2</li>
|
||||
<li>Item 3</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2>Info Section</h2>
|
||||
<div class="af-section af-info">
|
||||
<h3>ℹ️ Information</h3>
|
||||
<p>Using: <strong>SDXL 1.0</strong></p>
|
||||
<p>Steps: <code>25</code> | CFG: <code>7.5</code> | Sampler: <code>DPM++ 2M Karras</code></p>
|
||||
</div>
|
||||
|
||||
<h2>Warning Section</h2>
|
||||
<div class="af-section af-warning">
|
||||
<h3>⚠️ Warning</h3>
|
||||
<p>This workflow requires:</p>
|
||||
<ol>
|
||||
<li>High VRAM (8GB+)</li>
|
||||
<li>Latest ComfyUI version</li>
|
||||
<li>SDXL compatible models</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<h2>Column Layouts</h2>
|
||||
<div class="row">
|
||||
<div class="af-column-half-left">
|
||||
<div class="af-section af-positive">
|
||||
<h3>🎨 Style Settings</h3>
|
||||
<ul>
|
||||
<li>Style: Photorealistic</li>
|
||||
<li>Aspect: 16:9</li>
|
||||
<li>Quality: Ultra High</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="af-spacer"></div>
|
||||
|
||||
<div class="af-section af-info">
|
||||
<h3>⚙️ Technical</h3>
|
||||
<p>Resolution: <code>1920x1080</code></p>
|
||||
<p>Batch: <code>4</code></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="af-column-half-right">
|
||||
<div class="af-section af-negative">
|
||||
<h3>🚫 Exclusions</h3>
|
||||
<ul>
|
||||
<li>No text in image</li>
|
||||
<li>Avoid oversaturation</li>
|
||||
<li>No watermarks</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="af-spacer"></div>
|
||||
|
||||
<div class="af-section af-warning">
|
||||
<h3>💡 Tips</h3>
|
||||
<p>Use lower CFG for more creative results</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Clickable Links & Actions</h2>
|
||||
<div class="af-section af-info">
|
||||
<h3>🔗 Interactive Links</h3>
|
||||
|
||||
<!-- External link (opens in new tab with Ctrl+click) -->
|
||||
<p><a href="https://www.fullframestudios.ch/">Full Frame Studios - Alex Furer</a></p>
|
||||
|
||||
<!-- Alert action (triggers with Ctrl+click) -->
|
||||
<p><a href="https://www.fullframestudios.ch/" onclick="alert('Custom action triggered!')">Click for alert</a></p>
|
||||
|
||||
<!-- Console log action -->
|
||||
<p><a href="https://www.fullframestudios.ch/" onclick="console.log('Debug message logged')">Log to console</a></p>
|
||||
|
||||
<!-- Multiple actions -->
|
||||
<p><a href="https://www.fullframestudios.ch/" onclick="console.log('Link clicked')">Link with logging</a></p>
|
||||
|
||||
<!-- JavaScript links -->
|
||||
<p><a href="javascript:alert('Hello from JavaScript!')">JavaScript alert link</a></p>
|
||||
</div>
|
||||
|
||||
<h2>Custom Info Cards</h2>
|
||||
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
|
||||
<div style="flex: 1; min-width: 150px; background: rgba(144, 238, 144, 0.1); border: 1px solid #90EE90; padding: 12px; border-radius: 6px; text-align: center;">
|
||||
<strong style="color: #90EE90; display: block; margin-bottom: 4px;">Steps</strong>
|
||||
<p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">25</p>
|
||||
</div>
|
||||
|
||||
<div style="flex: 1; min-width: 150px; background: rgba(135, 206, 235, 0.1); border: 1px solid #87CEEB; padding: 12px; border-radius: 6px; text-align: center;">
|
||||
<strong style="color: #87CEEB; display: block; margin-bottom: 4px;">CFG Scale</strong>
|
||||
<p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">7.5</p>
|
||||
</div>
|
||||
|
||||
<div style="flex: 1; min-width: 150px; background: rgba(186, 85, 211, 0.1); border: 1px solid #BA55D3; padding: 12px; border-radius: 6px; text-align: center;">
|
||||
<strong style="color: #BA55D3; display: block; margin-bottom: 4px;">Batch Size</strong>
|
||||
<p style="margin: 0; font-size: 24px; color: #fff; font-weight: bold;">4</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- END: THIS CONTENT TO MAIN.PY FILE -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,276 @@
|
||||
.af-html-note-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100px;
|
||||
background: var(--comfy-menu-bg, #2a2a2a);
|
||||
/* border: 1px solid var(--border-color, #555); */
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--input-text, #ffffff);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.af-html-note-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
/* Prevent text selection */
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
cursor: default;
|
||||
/* Prevent keyboard focus */
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Ensure content area can't be focused */
|
||||
.af-html-note-content:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.af-html-note-editor {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--comfy-menu-bg, #2a2a2a);
|
||||
border: 1px solid var(--border-color, #555);
|
||||
padding: 8px;
|
||||
font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
line-height: 1.4;
|
||||
color: var(--input-text, #ffffff);
|
||||
box-sizing: border-box;
|
||||
resize: none;
|
||||
outline: none;
|
||||
font-size: 14px;
|
||||
display: none;
|
||||
flex: 1;
|
||||
/* Add text selection capabilities */
|
||||
user-select: auto;
|
||||
-webkit-user-select: auto;
|
||||
-moz-user-select: auto;
|
||||
-ms-user-select: auto;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
/* Floating edit button */
|
||||
.af-floating-edit-btn {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border: 1px solid var(--border-color, #555);
|
||||
color: var(--input-text, #ffffff);
|
||||
border-radius: 3px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
font-size: 11px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.af-floating-edit-btn:hover {
|
||||
opacity: 1;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
border-color: #777;
|
||||
}
|
||||
|
||||
/* Enable link interactions only when Ctrl is held */
|
||||
.af-html-note-content a {
|
||||
color: #58a6ff;
|
||||
text-decoration: none;
|
||||
/* Links are never directly clickable - only via Ctrl */
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
body.af-ctrl-active .af-html-note-content a {
|
||||
/* Only become clickable when Ctrl is held globally */
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
body.af-ctrl-active .af-html-note-content a:hover {
|
||||
color: #79c0ff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.af-html-note-container.edit-mode .af-html-note-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.af-html-note-container.edit-mode .af-html-note-editor {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Hide edit button in edit mode */
|
||||
.af-html-note-container.edit-mode .af-floating-edit-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Rest of your CSS remains the same... */
|
||||
.af-html-note-content h1, .af-html-note-content h2, .af-html-note-content h3,
|
||||
.af-html-note-content h4, .af-html-note-content h5, .af-html-note-content h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.af-html-note-content h1 { font-size: 1.5em; }
|
||||
.af-html-note-content h2 { font-size: 1.3em; }
|
||||
.af-html-note-content h3 { font-size: 1.1em; }
|
||||
|
||||
.af-html-note-content .af-section {
|
||||
padding: 8px 16px;
|
||||
margin: 8px 0;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid;
|
||||
}
|
||||
|
||||
.af-html-note-content .af-section.af-positive {
|
||||
background: rgba(144, 238, 144, 0.1);
|
||||
border-left-color: #90EE90;
|
||||
}
|
||||
|
||||
.af-html-note-content .af-section.af-negative {
|
||||
background: rgba(255, 107, 107, 0.1);
|
||||
border-left-color: #FF6B6B;
|
||||
}
|
||||
|
||||
.af-html-note-content .af-section.af-neutral {
|
||||
background: rgba(224, 224, 224, 0.1);
|
||||
border-left-color: #E0E0E0;
|
||||
}
|
||||
|
||||
.af-html-note-content .af-section.af-info {
|
||||
background: rgba(135, 206, 235, 0.1);
|
||||
border-left-color: #87CEEB;
|
||||
}
|
||||
|
||||
.af-html-note-content .af-section.af-warning {
|
||||
background: rgba(255, 128, 0, 0.1);
|
||||
border-left-color: #FFD700;
|
||||
}
|
||||
|
||||
.af-html-note-content .af-section.af-yellow {
|
||||
background: rgba(255, 128, 0, 0.1);
|
||||
border-left-color: #FFD700;
|
||||
}
|
||||
|
||||
.af-html-note-content .af-section.af-blue {
|
||||
background: rgba(102, 105, 255, 0.1);
|
||||
border-left-color: #000099;
|
||||
}
|
||||
|
||||
.af-html-note-content .af-section.af-custom {
|
||||
background: rgba(186, 85, 211, 0.1);
|
||||
border-left-color: #BA55D3;
|
||||
}
|
||||
|
||||
.af-html-note-content .af-spacer-top { height: 2px; margin: 4px 0; }
|
||||
.af-html-note-content .af-spacer-mini { height: 4px; margin: 4px 0; }
|
||||
.af-html-note-content .af-spacer-small { height: 8px; margin: 4px 0; }
|
||||
.af-html-note-content .af-spacer { height: 16px; margin: 8px 0; }
|
||||
.af-html-note-content .af-spacer-large { height: 32px; margin: 16px 0; }
|
||||
.af-html-note-content .af-spacer-xl { height: 48px; margin: 24px 0; }
|
||||
|
||||
.af-html-note-content code {
|
||||
background: rgba(0,0,0,0.3);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
font-size: 0.9em;
|
||||
color: #f0f6fc;
|
||||
}
|
||||
|
||||
.af-html-note-content pre {
|
||||
background: rgba(0,0,0,0.4);
|
||||
border: 1px solid #444;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
margin: 16px 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.af-html-note-content pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.af-html-note-content ul, .af-html-note-content ol {
|
||||
padding-left: 20px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.af-html-note-content li { margin: 4px 0; }
|
||||
.af-html-note-content p { margin: 8px 0; }
|
||||
|
||||
.af-html-note-content table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.af-html-note-content th, .af-html-note-content td {
|
||||
border: 1px solid var(--border-color, #555);
|
||||
padding: 8px 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.af-html-note-content th {
|
||||
background: rgba(255,255,255,0.1);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.af-html-note-content hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border-color, #555);
|
||||
margin: 16px 0;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.af-html-note-container::-webkit-scrollbar { width: 8px; }
|
||||
.af-html-note-container::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
|
||||
.af-html-note-container::-webkit-scrollbar-thumb {
|
||||
background: var(--border-color, #555);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.af-html-note-container::-webkit-scrollbar-thumb:hover { background: #777; }
|
||||
|
||||
.af-html-note-editor::-webkit-scrollbar { width: 8px; }
|
||||
.af-html-note-editor::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
|
||||
.af-html-note-editor::-webkit-scrollbar-thumb {
|
||||
background: var(--border-color, #555);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.af-html-note-editor::-webkit-scrollbar-thumb:hover { background: #777; }
|
||||
|
||||
/* ****** MY OWN STYLES ****** */
|
||||
.af-column-half-left {
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
width: 49%;
|
||||
margin-right: 1% !important;
|
||||
}
|
||||
.af-column-half-right {
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
width: 49%;
|
||||
margin-left: 1% !important;
|
||||
}
|
||||
.row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
Reference in New Issue
Block a user