diff --git a/.gitignore b/.gitignore index d472ab1..022b103 100644 --- a/.gitignore +++ b/.gitignore @@ -83,5 +83,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* -# AF speciffic +# AF specific Status.txt \ No newline at end of file diff --git a/AF_Enhanced_HTML_Note.py b/AF_Enhanced_HTML_Note.py index bf9ce79..5fad673 100644 --- a/AF_Enhanced_HTML_Note.py +++ b/AF_Enhanced_HTML_Note.py @@ -44,28 +44,131 @@ class AF_Enhanced_HTML_Note: "required": { "html_content": ("STRING", { "multiline": True, - "default": """
-

đŸŸĸ Positive Prompts

-

Your positive prompts go here...

- Click me! + "default": """

Positive Prompt Section

+
+

đŸŸĸ Positive Prompts

+

masterpiece, best quality, highly detailed

+
-
+

Negative Prompt Section

-

🔴 Negative Prompts

-

Your negative prompts go here...

+

🔴 Negative Prompts

+

low quality, blurry, distorted

+

nsfw, watermark, signature, bad anatomy

-
+

Neutral Prompt Section

-

📝 Notes

-

Additional notes and information...

- +

📝 Notes

+

General notes and information...

+ +
+ +

Info Section

+
+

ℹī¸ Information

+

Using: SDXL 1.0

+

Steps: 25 | CFG: 7.5 | Sampler: DPM++ 2M Karras

+
+ +

Warning Section

+
+

⚠ī¸ Warning

+

This workflow requires:

+
    +
  1. High VRAM (8GB+)
    2. +
  2. Latest ComfyUI version
    3. +
  3. SDXL compatible models
    4. +
+
+ +

Column Layouts

+
+
+
+

🎨 Style Settings

+
    +
  • Style: Photorealistic
    • +
  • Aspect: 16:9
    • +
  • Quality: Ultra High
    • +
+
+ +
+ +
+

⚙ī¸ Technical

+

Resolution: 1920x1080

+

Batch: 4

+
+
+ +
+
+

đŸšĢ Exclusions

+
    +
  • No text in image
    • +
  • Avoid oversaturation
    • +
  • No watermarks
    • +
+
+ +
+ +
+

💡 Tips

+

Use lower CFG for more creative results

+
+
+
+ +

Clickable Links & Actions

+
+

🔗 Interactive Links

+ + +

Full Frame Studios - Alex Furer

+ + +

Click for alert

+ + +

Log to console

+ + +

Link with logging

+ + +

JavaScript alert link

+
+ +

Custom Info Cards

+
+
+ Steps +

25

+
+ +
+ CFG Scale +

7.5

+
+ +
+ Batch Size +

4

+
""", "placeholder": "Enter your HTML content here..." }), @@ -91,3 +194,4 @@ NODE_CLASS_MAPPINGS = { NODE_DISPLAY_NAME_MAPPINGS = { "AF_Enhanced_HTML_Note": "AF - Enhanced HTML Note", } + diff --git a/README.md b/README.md index 29723a1..1076273 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,13 @@ -# AF Enhanced HTML Node - Usage Guide +# AF Enhanced HTML Node - Complete Usage Guide A ComfyUI Note node with HTML capabilities. Create notes, UI's and ReadMe's directly inside the workflow using rich HTML formatting. +![Version](https://img.shields.io/badge/version-0.0.5-blue) +![License](https://img.shields.io/badge/license-MIT-green) +![ComfyUI](https://img.shields.io/badge/ComfyUI-Compatible-orange) + +--- + ## ✨ Key Features - **Rich HTML Support** - Full HTML formatting with colored sections, lists, tables, code blocks, and more @@ -9,8 +15,11 @@ A ComfyUI Note node with HTML capabilities. Create notes, UI's and ReadMe's dire - **Easy Editing** - Double-click anywhere on the content to edit HTML - **Smart Links** - Ctrl+click to open external links or trigger custom actions - **Beautiful Styling** - Predefined color schemes that match ComfyUI's theme +- **Custom HTML Support** - Write your own HTML with inline styles - **No Dependencies** - All CSS is inlined for reliable performance +--- + ## 🎮 Interaction Guide ### Editing Content @@ -28,74 +37,16 @@ A ComfyUI Note node with HTML capabilities. Create notes, UI's and ReadMe's dire - **Drag edges/corners** to resize - **Middle mouse button** works for canvas panning (like other nodes) -## 🎨 Basic Section Colors +--- -```html - -
-

đŸŸĸ Positive Prompts

-

Your positive prompts go here...

-
+## 🎨 Predefined Section Colors - -
-

🔴 Negative Prompts

-

Your negative prompts go here...

-
+The node comes with several predefined colored section styles. Click each section below to see the code and rendered example. - -
-

📝 Notes

-

General notes and information...

-
+
+đŸŸĸ Positive Section (Green) - -
-

ℹī¸ Information

-

Important information...

-
- - -
-

⚠ī¸ Warning

-

Warning or caution messages...

-
- - -
-

🎨 Custom

-

Custom styled content...

-
-``` -## 📐 Spacers -```html - -
- - -
- - -
- - -
- -#🔗 Clickable Links & Actions - - -ComfyUI GitHub - - -Click for alert - - -Link with multiple actions - - -JavaScript link -``` -## 📋 Complete Example Template +### Code: ```html

đŸŸĸ Positive Prompts

@@ -105,30 +56,76 @@ A ComfyUI Note node with HTML capabilities. Create notes, UI's and ReadMe's dire
  • Sharp focus
  • 8K resolution
    • - 📋 Copy Prompts
    +``` -
    +### Rendered Result: +![Positive Section Example](examples/positive-section.png) +
    + +
    +🔴 Negative Section (Red) + +### Code: +```html

    🔴 Negative Prompts

    low quality, blurry, distorted

    - nsfw, watermark, signature, bad anatomy +

    nsfw, watermark, signature, bad anatomy

    +``` -
    +### Rendered Result: +![Negative Section Example](examples/negative-section.png) +
    + +
    +📝 Neutral Section (Gray) + +### Code: +```html +
    +

    📝 Notes

    +

    General notes and information...

    +
      +
    • Item 1
      • +
    • Item 2
      • +
    • Item 3
      • +
    +
    +``` + +### Rendered Result: +![Neutral Section Example](examples/neutral-section.png) + +
    + +
    +ℹī¸ Info Section (Light Blue) + +### Code: +```html
    -

    ℹī¸ Model Information

    +

    ℹī¸ Information

    Using: SDXL 1.0

    Steps: 25 | CFG: 7.5 | Sampler: DPM++ 2M Karras

    - Model Page
    +``` -
    +### Rendered Result: +![Info Section Example](examples/info-section.png) +
    + +
    +⚠ī¸ Warning Section (Yellow) + +### Code: +```html
    -

    ⚠ī¸ Important Notes

    +

    ⚠ī¸ Warning

    This workflow requires:

    1. High VRAM (8GB+)
      2. @@ -136,69 +133,669 @@ A ComfyUI Note node with HTML capabilities. Create notes, UI's and ReadMe's dire
    2. SDXL compatible models
    +``` + +### Rendered Result: +![Warning Section Example](examples/warning-section.png) + +
    + +
    +💛 Yellow Section (Alternative) + +### Code: +```html +
    +

    💛 Yellow Section

    +

    Alternative yellow styled content with different shade...

    +
    +``` + +### Rendered Result: +![Yellow Section Example](examples/yellow-section.png) + +
    + +
    +đŸ”ĩ Blue Section (Deep Blue) + +### Code: +```html +
    +

    đŸ”ĩ Blue Section

    +

    Deep blue styled content for technical information...

    +
    +``` + +### Rendered Result: +![Blue Section Example](examples/blue-section.png) + +
    + +
    +🎨 Custom Section (Purple) + +### Code: +```html +
    +

    🎨 Custom

    +

    Purple custom styled content for special cases...

    +
    +``` + +### Rendered Result: +![Custom Section Example](examples/custom-section.png) + +
    + +--- + +## 📏 Predefined Spacers + +Use these spacer classes to control vertical spacing between elements. + +
    +All Spacer Sizes - Click to see examples + +### Code: +```html +
    Content Block 1
    + + +
    + +
    Content Block 2
    + + +
    + +
    Content Block 3
    + + +
    + +
    Content Block 4
    + + +
    + +
    Content Block 5
    + + +
    + +
    Content Block 6
    + + +
    + +
    Content Block 7
    +``` + +### Rendered Result: +![Spacer Examples](examples/spacers.png) + +### Size Reference: +- `af-spacer-top` → 2px +- `af-spacer-mini` → 4px +- `af-spacer-small` → 8px +- `af-spacer` → 16px (default) +- `af-spacer-large` → 32px +- `af-spacer-xl` → 48px + +
    + +--- + +## 📐 Column Layouts + +Create two-column layouts using the predefined column classes. + +
    +Two-Column Layout Example + +### Code: +```html +
    +
    +
    +

    🎨 Style Settings

    +
      +
    • Style: Photorealistic
      • +
    • Aspect: 16:9
      • +
    • Quality: Ultra High
      • +
    +
    + +
    + +
    +

    ⚙ī¸ Technical

    +

    Resolution: 1920x1080

    +

    Batch: 4

    +
    +
    + +
    +
    +

    đŸšĢ Exclusions

    +
      +
    • No text in image
      • +
    • Avoid oversaturation
      • +
    • No watermarks
      • +
    +
    + +
    + +
    +

    💡 Tips

    +

    Use lower CFG for more creative results

    +
    +
    +
    +``` + +### Rendered Result: +![Two Column Layout Example](examples/two-column-layout.png) + +**Note:** The `row` class ensures proper column wrapping, and each column is 49% width with 1% margin. + +
    + +--- + +## 🔗 Clickable Links & Actions + +All links require **Ctrl+Click** to activate for safety and to prevent accidental navigation. JavaScript actions work on links when Ctrl+Click is used. + +
    +Link Examples + +### Code: +```html +
    +

    🔗 Interactive Links

    + + +

    ComfyUI GitHub Repository

    + + +

    Click for alert

    + + +

    Log to console

    + + +

    Link with logging

    + + +

    JavaScript alert link

    +
    +``` + +### Rendered Result: +![Link Examples](examples/links.png) + +**Remember:** Hold **Ctrl** while clicking any link to activate it! + +
    + +--- + +## đŸ’ģ Custom HTML & Inline Styles + +The node supports **standard HTML** with **inline CSS styling**. You can write custom HTML just like you would for a webpage. + +### ✅ Supported Features + +- **All standard HTML tags**: `
    `, ``, `

    `, `

    `-`

    `, `
      `, `
        `, `
      1. `, ``, etc. +- **Inline CSS styles**: Use the `style` attribute on any element +- **Text formatting**: ``, ``, ``, ``, ``, `
        `
+- **Lists**: Ordered and unordered lists
+- **Tables**: Full table support with styling
+- **Horizontal rules**: `
        ` for dividers
+- **Code blocks**: `` and `
        ` tags
+
+---
+
+## 🎨 Custom Styling Examples
+
+
        
+Custom Spacers with Inline Styles
+
+### Code:
+```html
+
        First Section
        
+
+
+
        
+
+
        Second Section
        
+
+
+
        
+
+
        Third Section
        
+
+
+
        
+
+
        Fourth Section
        
+```
+
+### Rendered Result:
+![Custom Spacers](examples/custom-spacers.png)
+
+
        
+
+
        
+Custom Colored Sections
+
+### Code:
+```html
+
+
        
+    
        Custom Pink Section
        
+    
        Your content here with custom colors...
        
+
        
+
+
+
        
+    
        Custom Teal Section
        
+    
        Different color scheme for variety...
        
+
        
+
+
+
        
+    
        Custom Orange Section
        
+    
        Create any color combination you need...
        
+
        
+```
+
+### Rendered Result:
+![Custom Colors](examples/custom-colors.png)
+
+
        
+
+
        
+Custom Text Styling
+
+### Code:
+```html
+
        
+    
+    
        
+        Large blue bold text for emphasis
+    
        
+    
+    
+    
        
+        Small gray italic text for subtitles
+    
        
+    
+    
+    
        
+        Highlighted text with yellow background
+    
        
+    
+    
+    
        
+        Custom monospace text for code-like display
+    
        
+
        
+```
+
+### Rendered Result:
+![Custom Text Styles](examples/custom-text.png)
+
+
        
+
+
        
+Custom Borders and Boxes
+
+### Code:
+```html
+
+
        
+    
        Dashed Border Box
        
+    
        Content in a custom dashed border box
        
+
        
+
+
+
        
+    
        Solid Border with Shadow
        
+    
        Creates depth with shadow effect
        
+
        
+
+
+
        
+    
        Thick Left Border
        
+    
        Emphasizes content with thick accent border
        
+
        
+```
+
+### Rendered Result:
+![Custom Borders](examples/custom-borders.png)
+
+
        
+
+
        
+Custom Layouts and Alignment
+
+### Code:
+```html
+
+
        
+    
        Centered Title
        
+    
        Centered paragraph text for announcements
        
+
        
+
+
+
        
+    Right-aligned footer note
+
        
+
+
+
        
+    Tag 1
+    Tag 2
+    Tag 3
+
        
+```
+
+### Rendered Result:
+![Custom Layouts](examples/custom-layouts.png)
+
+
        
+
+
        
+Custom Info Cards
+
+### Code:
+```html
+
        
+    
        
+        Steps
+        
        25
        
+    
        
+    
+    
        
+        CFG Scale
+        
        7.5
        
+    
        
+    
+    
        
+        Batch Size
+        
        4
        
+    
        
+
        
+```
+
+### Rendered Result:
+![Custom Info Cards](examples/custom-cards.png)
+
+
        
+
+---
+
+## ⚠ī¸ JavaScript Limitations
+
+JavaScript functionality is limited for security. It **only works on `` (link) elements** and **only when Ctrl+Click is used**.
+
+### ✅ What Works (with Ctrl+Click on links):
+```html
+
+Alert on click
+
+
+Log to console
+
+
+Confirmation dialog
+
+
+Multiple actions
+```
+
+### ❌ What Doesn't Work:
+```html
+
+
+
+
+
+
        Won't work
        
+
+
+
        Won't fire
        
+Won't fire
+
+
+
+    Can't modify other elements
+
+
+
+
+    Storage APIs blocked
+
+```
+
+### Security Restrictions:
+- **No `