| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ComfyUI Workflow</title> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| body { |
| font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; |
| background-color: #000000; |
| color: #f5f5f7; |
| line-height: 1.6; |
| padding: 20px; |
| min-height: 100vh; |
| } |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| .header { |
| text-align: center; |
| margin-bottom: 40px; |
| padding: 40px 20px; |
| } |
| .header h1 { |
| font-size: 48px; |
| font-weight: 600; |
| color: #ffffff; |
| margin-bottom: 12px; |
| letter-spacing: -0.02em; |
| } |
| .header p { |
| font-size: 18px; |
| color: #86868b; |
| font-weight: 400; |
| } |
| .controls { |
| display: flex; |
| gap: 12px; |
| margin-bottom: 24px; |
| justify-content: center; |
| } |
| .btn { |
| padding: 12px 24px; |
| border: none; |
| border-radius: 24px; |
| font-size: 14px; |
| font-weight: 500; |
| cursor: pointer; |
| transition: all 0.2s; |
| font-family: inherit; |
| } |
| .btn-primary { |
| background: #ffffff; |
| color: #000000; |
| } |
| .btn-primary:hover { |
| background: #f5f5f7; |
| transform: scale(0.98); |
| } |
| .btn-secondary { |
| background: #1d1d1f; |
| color: #f5f5f7; |
| border: 1px solid #424245; |
| } |
| .btn-secondary:hover { |
| background: #2d2d2f; |
| transform: scale(0.98); |
| } |
| .json-container { |
| background-color: #1d1d1f; |
| border-radius: 16px; |
| padding: 32px; |
| overflow-x: auto; |
| border: 1px solid #424245; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); |
| } |
| pre { |
| margin: 0; |
| font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace; |
| font-size: 13px; |
| line-height: 1.6; |
| white-space: pre-wrap; |
| word-wrap: break-word; |
| } |
| .json-key { |
| color: #9cdcfe; |
| } |
| .json-string { |
| color: #ce9178; |
| } |
| .json-number { |
| color: #b5cea8; |
| } |
| .json-boolean { |
| color: #569cd6; |
| } |
| .json-null { |
| color: #569cd6; |
| } |
| .success { |
| color: #30d158; |
| } |
| @media (max-width: 768px) { |
| .header h1 { |
| font-size: 32px; |
| } |
| .controls { |
| flex-direction: column; |
| } |
| .json-container { |
| padding: 20px; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <div class="header"> |
| <h1>ComfyUI Workflow</h1> |
| <p>View and download your workflow JSON</p> |
| </div> |
| |
| <div class="controls"> |
| <button class="btn btn-primary" onclick="downloadJSON()">Download JSON</button> |
| <button class="btn btn-secondary" onclick="copyToClipboard()">Copy to Clipboard</button> |
| </div> |
| |
| <div class="json-container"> |
| <pre id="json-content">{ |
| "last_node_id": 10, |
| "last_link_id": 12, |
| "nodes": [ |
| { |
| "id": 1, |
| "type": "CheckpointLoaderSimple", |
| "pos": [ |
| 20, |
| 50 |
| ], |
| "size": { |
| "0": 350, |
| "1": 100 |
| }, |
| "flags": {}, |
| "order": 0, |
| "mode": 0, |
| "outputs": [ |
| { |
| "name": "MODEL", |
| "type": "MODEL", |
| "links": [ |
| 1 |
| ], |
| "shape": 3, |
| "slot_index": 0 |
| }, |
| { |
| "name": "CLIP", |
| "type": "CLIP", |
| "links": [ |
| 2, |
| 3 |
| ], |
| "shape": 3, |
| "slot_index": 1 |
| }, |
| { |
| "name": "VAE", |
| "type": "VAE", |
| "links": [ |
| 7 |
| ], |
| "shape": 3, |
| "slot_index": 2 |
| } |
| ], |
| "properties": { |
| "Node name for S&R": "CheckpointLoaderSimple" |
| }, |
| "widgets_values": [ |
| "v1-5-pruned-emaonly.safetensors" |
| ] |
| }, |
| { |
| "id": 3, |
| "type": "CLIPTextEncode", |
| "pos": [ |
| 420, |
| 50 |
| ], |
| "size": { |
| "0": 425, |
| "1": 180 |
| }, |
| "flags": {}, |
| "order": 1, |
| "mode": 0, |
| "inputs": [ |
| { |
| "name": "CLIP", |
| "type": "CLIP", |
| "link": 2 |
| } |
| ], |
| "outputs": [ |
| { |
| "name": "CONDITIONING", |
| "type": "CONDITIONING", |
| "links": [ |
| 4 |
| ], |
| "shape": 3, |
| "slot_index": 0 |
| } |
| ], |
| "properties": { |
| "Node name for S&R": "CLIPTextEncode" |
| }, |
| "widgets_values": [ |
| "beautiful landscape, mountains, sunset, detailed, 8k, masterpiece" |
| ] |
| }, |
| { |
| "id": 4, |
| "type": "CLIPTextEncode", |
| "pos": [ |
| 420, |
| 280 |
| ], |
| "size": { |
| "0": 425, |
| "1": 180 |
| }, |
| "flags": {}, |
| "order": 2, |
| "mode": 0, |
| "inputs": [ |
| { |
| "name": "CLIP", |
| "type": "CLIP", |
| "link": 3 |
| } |
| ], |
| "outputs": [ |
| { |
| "name": "CONDITIONING", |
| "type": "CONDITIONING", |
| "links": [ |
| 5 |
| ], |
| "shape": 3, |
| "slot_index": 0 |
| } |
| ], |
| "properties": { |
| "Node name for S&R": "CLIPTextEncode" |
| }, |
| "widgets_values": [ |
| "ugly, blurry, low quality, distorted" |
| ] |
| }, |
| { |
| "id": 5, |
| "type": "EmptyLatentImage", |
| "pos": [ |
| 420, |
| 500 |
| ], |
| "size": { |
| "0": 315, |
| "1": 110 |
| }, |
| "flags": {}, |
| "order": 3, |
| "mode": 0, |
| "outputs": [ |
| { |
| "name": "LATENT", |
| "type": "LATENT", |
| "links": [ |
| 6 |
| ], |
| "shape": 3, |
| "slot_index": 0 |
| } |
| ], |
| "properties": { |
| "Node name for S&R": "EmptyLatentImage" |
| }, |
| "widgets_values": [ |
| 512, |
| 512, |
| 1 |
| ] |
| }, |
| { |
| "id": 6, |
| "type": "KSampler", |
| "pos": [ |
| 900, |
| 150 |
| ], |
| "size": { |
| "0": 300, |
| "1": 260 |
| }, |
| "flags": {}, |
| "order": 4, |
| "mode": 0, |
| "inputs": [ |
| { |
| "name": "model", |
| "type": "MODEL", |
| "link": 1 |
| }, |
| { |
| "name": "positive", |
| "type": "CONDITIONING", |
| "link": 4 |
| }, |
| { |
| "name": "negative", |
| "type": "CONDITIONING", |
| "link": 5 |
| }, |
| { |
| "name": "latent_image", |
| "type": "LATENT", |
| "link": 6 |
| } |
| ], |
| "outputs": [ |
| { |
| "name": "LATENT", |
| "type": "LATENT", |
| "links": [ |
| 8 |
| ], |
| "shape": 3, |
| "slot_index": 0 |
| } |
| ], |
| "properties": { |
| "Node name for S&R": "KSampler" |
| }, |
| "widgets_values": [ |
| 123456789, |
| "randomize", |
| 20, |
| 7, |
| "euler", |
| "normal", |
| 1 |
| ] |
| }, |
| { |
| "id": 7, |
| "type": "VAEDecode", |
| "pos": [ |
| 1280, |
| 150 |
| ], |
| "size": { |
| "0": 210, |
| "1": 50 |
| }, |
| "flags": {}, |
| "order": 5, |
| "mode": 0, |
| "inputs": [ |
| { |
| "name": "samples", |
| "type": "LATENT", |
| "link": 8 |
| }, |
| { |
| "name": "vae", |
| "type": "VAE", |
| "link": 7 |
| } |
| ], |
| "outputs": [ |
| { |
| "name": "IMAGE", |
| "type": "IMAGE", |
| "links": [ |
| 9 |
| ], |
| "shape": 3, |
| "slot_index": 0 |
| } |
| ], |
| "properties": { |
| "Node name for S&R": "VAEDecode" |
| } |
| }, |
| { |
| "id": 8, |
| "type": "SaveImage", |
| "pos": [ |
| 1560, |
| 150 |
| ], |
| "size": { |
| "0": 315, |
| "1": 60 |
| }, |
| "flags": {}, |
| "order": 6, |
| "mode": 0, |
| "inputs": [ |
| { |
| "name": "images", |
| "type": "IMAGE", |
| "link": 9 |
| } |
| ], |
| "properties": { |
| "Node name for S&R": "SaveImage" |
| }, |
| "widgets_values": [ |
| "ComfyUI_Image" |
| ] |
| }, |
| { |
| "id": 9, |
| "type": "KSamplerAdvanced", |
| "pos": [ |
| 900, |
| 500 |
| ], |
| "size": { |
| "0": 300, |
| "1": 330 |
| }, |
| "flags": {}, |
| "order": 7, |
| "mode": 0, |
| "inputs": [ |
| { |
| "name": "model", |
| "type": "MODEL", |
| "link": 1 |
| }, |
| { |
| "name": "positive", |
| "type": "CONDITIONING", |
| "link": 4 |
| }, |
| { |
| "name": "negative", |
| "type": "CONDITIONING", |
| "link": 5 |
| }, |
| { |
| "name": "latent_image", |
| "type": "LATENT", |
| "link": 6 |
| } |
| ], |
| "outputs": [ |
| { |
| "name": "LATENT", |
| "type": "LATENT", |
| "links": [ |
| 10 |
| ], |
| "shape": 3, |
| "slot_index": 0 |
| }, |
| { |
| "name": "LATENT", |
| "type": "LATENT", |
| "links": null, |
| "shape": 3 |
| } |
| ], |
| "properties": { |
| "Node name for S&R": "KSamplerAdvanced" |
| }, |
| "widgets_values": [ |
| "enable", |
| 123456789, |
| "randomize", |
| 20, |
| 7, |
| "euler", |
| "normal", |
| 0, |
| 20, |
| "disable" |
| ] |
| }, |
| { |
| "id": 10, |
| "type": "PreviewImage", |
| "pos": [ |
| 1280, |
| 500 |
| ], |
| "size": { |
| "0": 295, |
| "1": 290 |
| }, |
| "flags": {}, |
| "order": 8, |
| "mode": 0, |
| "inputs": [ |
| { |
| "name": "images", |
| "type": "IMAGE", |
| "link": 11 |
| } |
| ], |
| "properties": { |
| "Node name for S&R": "PreviewImage" |
| } |
| }, |
| { |
| "id": 11, |
| "type": "VAEDecode", |
| "pos": [ |
| 1280, |
| 320 |
| ], |
| "size": { |
| "0": 210, |
| "1": 50 |
| }, |
| "flags": {}, |
| "order": 9, |
| "mode": 0, |
| "inputs": [ |
| { |
| "name": "samples", |
| "type": "LATENT", |
| "link": 10 |
| }, |
| { |
| "name": "vae", |
| "type": "VAE", |
| "link": 7 |
| } |
| ], |
| "outputs": [ |
| { |
| "name": "IMAGE", |
| "type": "IMAGE", |
| "links": [ |
| 11 |
| ], |
| "shape": 3, |
| "slot_index": 0 |
| } |
| ], |
| "properties": { |
| "Node name for S&R": "VAEDecode" |
| } |
| } |
| ], |
| "links": [ |
| [ |
| 1, |
| 1, |
| 0, |
| 6, |
| 0, |
| "MODEL" |
| ], |
| [ |
| 2, |
| 1, |
| 1, |
| 3, |
| 0, |
| "CLIP" |
| ], |
| [ |
| 3, |
| 1, |
| 1, |
| 4, |
| 0, |
| "CLIP" |
| ], |
| [ |
| 4, |
| 3, |
| 0, |
| 6, |
| 1, |
| "CONDITIONING" |
| ], |
| [ |
| 5, |
| 4, |
| 0, |
| 6, |
| 2, |
| "CONDITIONING" |
| ], |
| [ |
| 6, |
| 5, |
| 0, |
| 6, |
| 3, |
| "LATENT" |
| ], |
| [ |
| 7, |
| 1, |
| 2, |
| 7, |
| 1, |
| "VAE" |
| ], |
| [ |
| 8, |
| 6, |
| 0, |
| 7, |
| 0, |
| "LATENT" |
| ], |
| [ |
| 9, |
| 7, |
| 0, |
| 8, |
| 0, |
| "IMAGE" |
| ], |
| [ |
| 10, |
| 9, |
| 0, |
| 11, |
| 0, |
| "LATENT" |
| ], |
| [ |
| 11, |
| 11, |
| 0, |
| 10, |
| 0, |
| "IMAGE" |
| ] |
| ], |
| "groups": [], |
| "config": {}, |
| "extra": { |
| "ds": { |
| "scale": 1, |
| "offset": [ |
| 0, |
| 0 |
| ] |
| } |
| }, |
| "version": 0.4 |
| }</pre> |
| </div> |
| </div> |
|
|
| <script> |
| function copyToClipboard() { |
| const jsonContent = document.getElementById('json-content').textContent; |
| navigator.clipboard.writeText(jsonContent).then(() => { |
| const btn = event.target; |
| const originalText = btn.textContent; |
| btn.textContent = 'Copied!'; |
| btn.classList.add('success'); |
| setTimeout(() => { |
| btn.textContent = originalText; |
| btn.classList.remove('success'); |
| }, 2000); |
| }).catch(err => { |
| alert('Failed to copy to clipboard'); |
| }); |
| } |
| |
| function downloadJSON() { |
| const jsonContent = document.getElementById('json-content').textContent; |
| const blob = new Blob([jsonContent], { type: 'application/json' }); |
| const url = URL.createObjectURL(blob); |
| const a = document.createElement('a'); |
| a.href = url; |
| a.download = 'comfyui_workflow.json'; |
| document.body.appendChild(a); |
| a.click(); |
| document.body.removeChild(a); |
| URL.revokeObjectURL(url); |
| |
| const btn = event.target; |
| const originalText = btn.textContent; |
| btn.textContent = 'Downloaded!'; |
| btn.classList.add('success'); |
| setTimeout(() => { |
| btn.textContent = originalText; |
| btn.classList.remove('success'); |
| }, 2000); |
| } |
| |
| |
| function highlightJSON() { |
| const content = document.getElementById('json-content'); |
| let html = content.innerHTML; |
| |
| |
| html = html.replace(/"([^"]+)":/g, '<span class="json-key">"$1":</span>'); |
| html = html.replace(/: "([^"]*)"/g, ': <span class="json-string">"$1"</span>'); |
| html = html.replace(/: (-?\d+\.?\d*)/g, ': <span class="json-number">$1</span>'); |
| html = html.replace(/: (true|false)/g, ': <span class="json-boolean">$1</span>'); |
| html = html.replace(/: null/g, ': <span class="json-null">null</span>'); |
| |
| content.innerHTML = html; |
| } |
| |
| |
| window.addEventListener('load', highlightJSON); |
| </script> |
| </body> |
| </html> |
